Accessible Color Contrast: WCAG 2.1, Ratios, and Practical Color Choices

A high-contrast color choice is the most impactful accessibility decision you can make on a website. It costs nothing, applies to every page automatically, and helps the largest group of users: people with low vision, color vision deficiencies, age-related vision loss, and anyone reading a screen in bright sunlight. The WCAG 2.1 standard quantifies contrast as a ratio between two colors, and the thresholds for AA and AAA compliance are well-tested against real reading conditions.

What the Contrast Ratio Is

The WCAG contrast ratio is a single number between 1 and 21 that quantifies the difference between two colors. A ratio of 1 means the colors are identical (no contrast, like white on white); a ratio of 21 means the colors are at maximum contrast (black on white). The ratio is computed from the relative luminance of each color, which is a perceptual measure of how bright the color appears to the human eye.

The formula has two steps. First, each sRGB channel is linearized:

function linearize(c) {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}

The 0.03928 threshold and the 12.92 / 1.055 constants come from the sRGB specification. The linearization compensates for the gamma curve that displays apply to the raw byte values; a linearized value of 0.5 is the perceptual midpoint of brightness, not 0.5 / 255.

Second, the relative luminance is a weighted sum of the linearized channels:

function relativeLuminance(r, g, b) {
    return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
}

The weights (0.2126, 0.7152, 0.0722) match the perceptual brightness contribution of each channel: green contributes the most, red the second-most, blue the least. A pure green at luminance 0.5 is much brighter than a pure blue at the same luminance, even though the RGB byte values are identical.

Finally, the contrast ratio is computed from the two luminances:

function contrastRatio(L1, L2) {
    const lighter = Math.max(L1, L2);
    const darker = Math.min(L1, L2);
    return (lighter + 0.05) / (darker + 0.05);
}

The 0.05 offset prevents division by zero when comparing two identical colors (the ratio collapses to 1). The Color Converter implements this formula and shows the ratio against white (255, 255, 255) and black (0, 0, 0).

The AA and AAA Thresholds

WCAG 2.1 defines two compliance levels: AA (the minimum) and AAA (the enhanced). Each level sets two thresholds: one for normal text and one for large text. Large text is 18pt (24px) or larger, or 14pt (~18.67px) or larger if bold. The thresholds are:

• AA (minimum): 4.5:1 for normal text, 3:1 for large text.
• AAA (enhanced): 7:1 for normal text, 4.5:1 for large text.

The thresholds are based on research into how readable text is for users with low vision (visual acuity of 20/40 or worse). The contrast ratio required to read text at 20/40 acuity is roughly 4.5:1; for 20/80 acuity, it is roughly 7:1. These are not arbitrary numbers; they are derived from the physiology of the visual system.

The large-text exemption exists because larger letters are easier to read at lower contrast. The visual system integrates light over a larger area, so the signal-to-noise ratio improves. The trade-off is that large text is also less compact; the WCAG guidelines accept this trade-off in exchange for the lower contrast requirement.

What the Thresholds Mean in Practice

Most websites target AA compliance as the baseline. AAA is more demanding and is typically reserved for government, healthcare, and education sites where the legal standard is higher. The practical implications:

• Body text on a white background — aim for a text color around #595959 (gray) or darker. Pure black (#000) on pure white (#FFF) gives a 21:1 ratio, well above AAA. The text color #767676 gives 4.54:1, just above AA.
• Body text on a colored background — the colored background drives the contrast. Light backgrounds (e.g., #F0F8FF) require darker text; dark backgrounds require lighter text. The Color Converter shows the ratio against white and black; for other backgrounds, the formula is the same.
• Link text and interactive elements — the same thresholds apply, but the convention is to also use a non-color cue (underline, weight change) so that color-blind users can identify links without relying on hue contrast.
• UI components — WCAG 2.1 added a 3:1 threshold for UI components and graphical objects (icons, form input borders, focus rings). The contrast is measured between the component and its immediate background.

The Sourced Color Trap

A common mistake is to pick a brand color and assume it works as text. The brand color was likely chosen for visual impact, which favors medium saturation and medium lightness — exactly the range that produces poor contrast against a white or black background. A medium blue like #4287F5 has a contrast of only 2.84:1 against white, well below the AA threshold.

The fix is to derive text colors from the brand color by shifting the lightness in HSL. A brand blue at HSL(220, 90%, 50%) is too light for text; HSL(220, 90%, 30%) is dark enough to read on white, and HSL(220, 90%, 80%) is light enough to read on a dark brand background. The Color Converter shows the WCAG grade for each form; use it to find the variants of the brand color that meet the contrast threshold.

Color Blindness

The contrast ratio does not account for color blindness. Two colors that have a 10:1 ratio for someone with normal vision may be indistinguishable for someone with red-green color blindness. The most common forms are deuteranopia (red-green) and protanopia (red-blind), affecting about 8% of men and 0.5% of women of European descent.

The mitigations:

• Use multiple cues, not just color. A form field error indicated only by red color is invisible to someone with red-green color blindness. Adding an icon and text label makes the error readable for everyone.
• Avoid red-green and green-blue combinations for critical information. A red and green status indicator should also differ in shape or position. Charts and graphs should use color-blind safe palettes (e.g., ColorBrewer, Viridis).
• Test with a color-blindness simulator. Chrome DevTools and Firefox both have color blindness filters that simulate how the page looks to users with each form of color vision deficiency. Run the design through these filters as a final check.
• Don’t rely on color to convey meaning. Color is a powerful differentiator but it should never be the only differentiator. WCAG 2.1 Success Criterion 1.4.1 makes this a Level A requirement.

What the WCAG Ratio Does Not Measure

The contrast ratio is a necessary but not sufficient condition for accessibility. It does not account for:

• Font size and weight. The threshold depends on the visual size of the text. The 4.5:1 ratio is for normal text; large text gets 3:1.
• Line spacing and letter spacing. Tight letter spacing reduces readability at any contrast ratio. WCAG 1.4.12 sets minimum spacing requirements.
• Italic and oblique styles. Italics are harder to read at any contrast. The WCAG guidelines do not set a separate threshold but the practical advice is to use italics sparingly.
• Background patterns and images. A background image behind text can reduce the effective contrast in the text area. The WCAG ratio is measured against a solid background; in practice, the ratio is lower.
• Reading distance and screen brightness. The ratio is measured at a fixed reading distance and screen brightness. Users with low vision may need to zoom in (changing the effective size) or use a high-brightness mode (changing the perceived contrast).

The ratio is a useful threshold check, not a complete accessibility audit. A color pair that meets WCAG 2.1 AA is a good starting point; the rest of the design must still be considered.

Designing with Contrast in Mind

Three practical patterns for building a color system that meets WCAG:

1. Start with the background. The background color is the anchor. Pick a light or dark background and stick to it across the design. Mixing light and dark sections is fine, but each section should have a clear contrast relationship.
2. Define a text color scale. Build a set of 4–6 text colors (primary, secondary, tertiary, link, error, success) that all meet the contrast threshold against the background. Test each one in the Color Converter.
3. Derive interactive states from the text colors. Hover, focus, active, and disabled states should be variations on the same hue, with enough contrast to be distinguishable. A common pattern: the default text color, a slightly lighter or darker version for hover, and a clearly desaturated version for disabled.

The advantage of this approach is consistency: every component in the design uses the same color palette, so accessibility checks are performed once on the palette rather than per component. The Color Converter is the right tool for the initial palette check; ongoing audits use the same WCAG formula automated in tools like Lighthouse or axe.

Automated Tools and Manual Audits

Automated tools catch most contrast issues but miss some:

• Lighthouse (Chrome DevTools) runs the axe-core audit, which checks every text element against its computed background. The default threshold is AA.
• axe DevTools (browser extension) provides the same checks with more detail. It identifies the failing elements, the computed colors, and the recommended fixes.
• Stark (Figma plugin) checks contrast during the design phase, before any code is written. Useful for design teams that want to catch issues before handoff.
• Colorable (web tool) is a palette builder that shows the contrast between every pair of colors in a palette. Useful for designing accessible color systems.

Manual audits still matter for the issues that automated tools miss: text overlaid on images, color used as the only cue, and animations that change the effective contrast over time. A good practice is to run automated checks on every commit, then do a manual review of the design system once per release.

Real-World Examples

A few color pairs that fail and pass WCAG AA, to calibrate intuition:

• Fail: Gray text #999999 on white. Contrast 2.85:1, fails AA. The text is hard to read for everyone; the failure is most severe for low-vision users.
• Pass AA: Gray text #767676 on white. Contrast 4.54:1, passes AA. The text is readable for most users including those with mild low vision.
• Pass AAA: Gray text #595959 on white. Contrast 7.46:1, passes AAA. Comfortable for body text across the full range of users.
• Pass AA large: Brand blue #4287F5 on white. Contrast 2.84:1, fails AA. Acceptable only for non-text elements (icons, decorative graphics) at any size, or for large text where the threshold is 3:1.
• Pass AA: Brand blue #1E5BB8 on white. Contrast 7.06:1, passes AAA. A typical solution for using the brand color as a link.

The pattern: as the text gets darker, the contrast goes up. The threshold is a single number (4.5:1 for AA, 7:1 for AAA), and the design choice is which threshold to target. For body text, AAA is the right goal. For incidental text (captions, helper text, de-emphasized labels), AA is the minimum.

The Bottom Line

The WCAG 2.1 contrast ratio is a single number that quantifies the readability of a text-and-background pair. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Meeting the threshold requires no special tools beyond a contrast checker, but meeting it consistently across a design system requires building the palette around contrast from the start. The Color Converter is the right tool for the initial check; ongoing audits use automated tools like Lighthouse or axe. The result is a design that is readable for the widest range of users, with no trade-off in visual quality.

Further Reading

• W3C WCAG 2.1 — the formal specification, including Success Criterion 1.4.3 (Contrast Minimum) and 1.4.11 (Non-text Contrast).
• WebAIM Contrast Checker — the most widely used online contrast checker, with a focus on accessibility.
• Colorable — a palette builder that shows the contrast between every pair of colors, useful for designing accessible color systems.
• TPGi Color Contrast Analyzer — a downloadable tool for picking colors from the screen and checking their contrast.
• axe-core Rules: color-contrast — the implementation behind Lighthouse, with the precise formulas and edge cases.

Frequently Asked Questions