Color accessibility

Color contrast checker

Check any foreground and background color combination against WCAG 2.1 and 2.2 AA and AAA contrast requirements. Free, instant, no account needed.

This interactive contrast checker requires JavaScript.

For reference, WCAG 2.1 and 2.2 require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text—24px regular or approximately 18.5px bold—at Level AA. Level AAA requires 7:1 for normal text and 4.5:1 for large text. At Level AA, visual information needed to identify active interface components and meaningful parts of graphics must have at least 3:1 contrast against adjacent colors.

Text / foreground color

Background color

Large text preview — 24px regular

Large text preview — 18.5px bold

Normal body text — this is how your color combination looks at regular paragraph size. Sufficient contrast supports readability, including for many people with low vision.

{{ wcag.ratioDisplay }}:1

Contrast ratio

Text

{{ wcag.aa_normal ? '✓' : '✗' }} AA — normal text (4.5:1) {{ wcag.aa_normal ? 'Pass' : 'Fail' }}

{{ wcag.aa_large ? '✓' : '✗' }} AA — large text (3:1) {{ wcag.aa_large ? 'Pass' : 'Fail' }}

{{ wcag.aaa_normal ? '✓' : '✗' }} AAA — normal text (7:1) {{ wcag.aaa_normal ? 'Pass' : 'Fail' }}

{{ wcag.aaa_large ? '✓' : '✗' }} AAA — large text (4.5:1) {{ wcag.aaa_large ? 'Pass' : 'Fail' }}

Non-text

{{ wcag.aa_ui ? '✓' : '✗' }} AA — UI components & graphics (3:1) {{ wcag.aa_ui ? 'Pass' : 'Fail' }}

Share this color combination:

Quick fixes — instant adjustments

Keep your background — adjust text

Text color cannot be adjusted enough to pass

Keep your text — adjust background

Background cannot be adjusted enough to pass

AI suggested alternatives

Sample text preview — Option {{ i + 1 }}

{{ s.fg }} on {{ s.bg }}

{{ computeSuggestionRatio(s) }}:1

AA {{ computeSuggestionWcag(s).aa_normal ? '✓' : '✗' }} AAA {{ computeSuggestionWcag(s).aaa_normal ? '✓' : '✗' }}

Color values

FOREGROUND

Luminance: {{ fgLum }}

BACKGROUND

Luminance: {{ bgLum }}

Color blindness simulation

{{ sim.label }} {{ sim.ratio }}:1

Understanding Your Results

Color contrast is measured as a ratio between the lighter and darker of two colors, ranging from 1:1 (no contrast) to 21:1 (black on white). WCAG has three conformance levels: A, AA, and AAA. For text contrast, the relevant requirements are Level AA under Success Criterion 1.4.3 and Level AAA under Success Criterion 1.4.6. This checker evaluates the contrast requirements for an individual color combination; it does not determine whether an entire page or website conforms to WCAG. Level AA is the most common conformance target. Level AAA provides enhanced contrast thresholds, although W3C does not recommend requiring full AAA conformance for entire websites as a general policy. Individual AAA contrast requirements can still be useful when greater readability is desired.

If your colors fail, try darkening the darker color, lightening the lighter color, or adjusting the hue — some hues are naturally higher or lower in luminance than others. Another option is to use the calculated suggestions displayed below the result. The tool can also provide AI-powered palette-aware color suggestions. Every suggested pair is independently checked against the WCAG contrast formula before it is displayed.

Exemption Rules

Logos & Brand Names: Text that is part of a logo or brand name is exempt from the text-contrast requirements in Success Criteria 1.4.3 and 1.4.6. This exemption does not extend to ordinary headings, navigation, buttons, or body text simply because they use brand colors.
Purely Decorative Elements: Text or graphics that are purely decorative and convey no information are exempt from the applicable contrast requirement. However, any background behind meaningful text must still provide sufficient contrast with that text.
Inactive Components: Controls that are not currently available for interaction, such as properly disabled buttons, are exempt while they remain inactive.

Beyond Contrast

Contrast is where accessibility starts, not where it ends. An accessible website also depends on keyboard access, clear structure, properly labeled form controls, appropriate image alternatives, screen-reader compatibility, and more. Meeting ADA Title II or Section 508 requirements involves much more than color contrast alone.

Learn about our ADA audit & remediation services →

The History of This Tool

Colors on the Web has provided color tools and accessibility resources since 1998. We launched the first version of this contrast checker in 2007, when WCAG 2.0 and its contrast-ratio formula were still being developed as a W3C Working Draft.

Tool Disclaimer

This tool is provided for general informational purposes. Results apply only to the specific colors entered and do not establish that a website or application conforms to WCAG or complies with the ADA, Section 508, or any other legal, regulatory, or accessibility requirement. Although we make reasonable efforts to provide accurate calculations, we do not guarantee that results will be error-free, complete, or suitable for every use. Use of this tool does not constitute legal advice or accessibility certification. You should independently verify results before relying on them for compliance decisions.