Skip to content

Color contrast checker (WCAG AA and AAA)

Check whether your text is readable on its background: get the WCAG contrast ratio, see AA and AAA results for normal text, large text and UI elements, and get the closest color that passes.

4.64:1Good

Preview Title

The quick brown fox jumps over the lazy dog

Colors

  • Normal text

    AA 4.5 · AAA 7

    AAAAA

  • Large text

    AA 3 · AAA 4.5

    AAAAA

  • UI element

    AA 3

    AA

Contrast 4.64:1. Normal text: AA Pass, AAA Fail. Large text: AA Pass, AAA Pass. UI element: AA Pass.

Colors that pass

The closest colors that pass for normal text, keeping the same hue. Click one to apply it.

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.

Example pairs

Common color pairs, some that pass and some that do not. Load one to check it.

What contrast ratio is and why it matters

The contrast ratio measures the difference in luminance between two colors, usually text and its background. The higher the number, the easier it is to tell text apart from the background. The Web Content Accessibility Guidelines (WCAG), the international reference standard, set minimum ratios based on text size and the conformance level you want to meet.

Insufficient contrast is not just an aesthetic issue: it makes reading harder for people with low vision, color-perception deficiencies, or anyone using a phone in bright sunlight. Meeting WCAG is also a legal requirement in many countries under digital accessibility regulations.

AA and AAA levels, explained

AA (recommended minimum)

This is the level required by most accessibility regulations, including the European Accessibility Act.

Normal text
4.5:1
Large text / UI
3:1

AAA (enhanced level)

Recommended for critical content or audiences with higher accessibility needs, but not always required across an entire site.

Normal text
7:1
Large text
4.5:1

How to check contrast in three steps

  1. Pick text and background

    Click Text color or Background color and adjust it with the picker, the eyedropper or by typing its code. Transparency is supported.

  2. Review each use

    You get the ratio and whether it passes AA and AAA for normal text, large text and UI elements such as icons or field borders.

  3. Apply a suggestion

    If it fails, the tool suggests the closest color that passes, keeping the same hue. One click and you are done.

What counts as large text

WCAG treats as large text anything at least 18 points (24 px), or 14 points bold (about 18.66 px). Its thicker strokes are readable with less contrast: 3:1 is enough for AA and 4.5:1 for AAA.

Everything else is normal text, which needs 4.5:1 for AA and 7:1 for AAA. Watch out for small supporting text such as notes, labels or captions: they are usually the ones that fail.

Contrast for buttons, icons and fields

Contrast is not only about text. WCAG asks for at least 3:1 for the interface elements you need to see to use the page: a form field border, icons that convey information, the focus indicator or the states of a control.

A very light gray border on white may look elegant, but many people will not be able to tell where the field is.

Not required to pass

  • Logos
  • Decorative text
  • Disabled controls
  • Images and photos

How the contrast ratio is calculated

The ratio compares the relative luminance of the two colors, that is, how much light each one emits once corrected for how the eye responds.

L1
Relative luminance of the lighter color, from 0 (black) to 1 (white).
L2
Relative luminance of the darker color.
0.05
Accounts for ambient light reflected on the screen. That is why the maximum is 21:1 (white on black) and the minimum 1:1 (the same color).

(L1 + 0.05) / (L2 + 0.05)

Aa(1 + 0.05) / (0 + 0.05) = 21:1

Frequently asked questions

For normal text, a ratio of at least 4.5:1 meets WCAG level AA, the recommended minimum standard. For enhanced contrast (level AAA), you need a ratio of 7:1.

AA is the minimum level required by most accessibility regulations. AAA is a stricter enhanced level, recommended for critical content but not always mandatory across an entire site.

Because the size and weight of large letters already make them easier to read, so WCAG allows a lower ratio (3:1 at AA) versus the 4.5:1 required for normal text.

Text at least 18 points (24 px), or 14 points bold (about 18.66 px). It needs 3:1 for AA and 4.5:1 for AAA, versus 4.5:1 and 7:1 for normal text.

In many countries yes, especially for public administrations and, increasingly, for private companies under rules like the European Accessibility Act. Even when it is not legally required, meeting WCAG improves the experience for all of your users.

It is calculated from the relative luminance of both colors, a measure of how much light they reflect, and expressed as a ratio between 1:1 (no contrast, same color) and 21:1 (the maximum, pure white on pure black).

No. WCAG exempts logos, decorative text and disabled controls. It does apply to active buttons, form fields, meaningful icons and the focus indicator, which need at least 3:1.

The ratio is calculated on the color you actually see: semi-transparent text is blended with its background before measuring, and a semi-transparent background is blended with white. You can add transparency from the tool’s color field.

Use the tool’s suggestions: it offers the closest text or background color that passes AA or AAA, keeping the same hue so your brand does not change. You can also explore variations of the color in the color picker.

More tools