Colour contrast checker — does your colour combination meet WCAG?
Insufficient colour contrast is one of the most common accessibility issues on websites. Text that does not contrast enough with its background is hard to read for people with a visual impairment — but also for anyone using a screen in bright sunlight.
With this free colour contrast checker you can instantly verify whether your colour combination meets the WCAG guidelines.
How does the colour contrast checker work?
Enter a foreground colour (text) and a background colour. The tool calculates the contrast ratio and shows whether your combination meets WCAG level AA and AAA — for normal text, large text and UI components.
Check whether your colour combination meets the WCAG guidelines. Enter two colours and instantly see if the contrast is sufficient — and for which situations.
Level AA
Level AAA
Which requirement applies when?
Text and images of text must have a contrast ratio of at least 4.5:1.
Large text (18pt / 24px or larger, or 14pt / 18.66px bold) may have a lower ratio of 3:1.
This criterion does not apply to logos, brand names or decorative text.
UI components (buttons, form fields, icons) and graphical objects needed to understand the content
must have a contrast ratio of at least 3:1 against adjacent colours.
Think of the border of an input field, the colour of an icon, or the state of a toggle.
Text must have a contrast ratio of at least 7:1. Large text: 4.5:1.
This is the highest level and not legally required, but recommended for
optimal readability — for example for longer texts or an older audience.
Threshold overview
| What | AA (required) | AAA (recommended) |
|---|---|---|
| Normal text (< 18pt) | 4.5:1 | 7:1 |
| Large text (≥ 18pt / ≥ 14pt bold) | 3:1 | 4.5:1 |
| UI components & icons | 3:1 | — |
Colour contrast is just one of the 55 WCAG success criteria. Want to know if your entire website meets accessibility requirements?
Request an audit or call +31 85 5055 890.