Color Contrast Checker: WCAG AA and AAA

Large text sample
Bold heading sample

Normal body text sample. The quick brown fox jumps over the lazy dog, and the five boxing wizards jump quickly.

Button
Contrast ratio

Normal text

Under 24px, or under 18.66px bold

AAneeds 4.5:1
AAAneeds 7:1

Large text

24px and up, or 18.66px bold and up

AAneeds 3:1
AAAneeds 4.5:1

UI components and graphics

Borders, icons, charts

AAneeds 3:1

About the Contrast Checker

Color contrast is how easily text and other interface elements stand out from the color behind them. Low contrast is one of the most common accessibility problems on the web, and it affects people with low vision, color blindness and anyone reading a screen in bright light.

Enter a text color and a background color as hex values, or pick them with the color pickers. The tool shows the WCAG 2 contrast ratio and whether the pair passes AA and AAA for normal text, large text and user interface components.

How to check color contrast

  1. Enter or pick the text color and the background color.
  2. Read the contrast ratio and the AA and AAA results.
  3. If something fails, adjust the text color or the background until it passes.

Frequently asked questions

What is a good contrast ratio?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text and user interface components. AAA asks for 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

Text that is at least 24px (18pt) at regular weight, or at least 18.66px (14pt) and bold. Anything smaller is normal text and needs the higher ratio.

What is the difference between WCAG AA and AAA?

AA is the level most laws and policies ask for, and it is a reasonable target for almost every site. AAA is stricter and is usually aimed at body text where you want the best possible legibility.

Does the contrast ratio apply to buttons and icons?

Yes. WCAG 1.4.11 Non-text Contrast asks for at least 3:1 for the parts of buttons, form fields, icons and charts that people need to see to use them. Inactive controls, logos and purely decorative graphics are exempt.

How is the contrast ratio calculated?

WCAG 2.x compares the relative luminance of the two colors: (lighter + 0.05) / (darker + 0.05). The result goes from 1:1 for identical colors to 21:1 for black on white.

Are my colors sent anywhere?

No. The calculation runs in your browser and nothing is uploaded. The colors are only added to the page address so you can share or bookmark a result.