Pick a foreground and background color; the ratio and AA / AAA pass-fail results update as you change them.
Color Contrast Checker (WCAG)
Check the contrast ratio between text and background colors against WCAG AA and AAA.
Pick a foreground and background color and the ratio plus AA / AAA pass-fail results update as you change them.
Key features
- Foreground and background color inputs plus HEX text fields.
- Swap colors control to flip text and background in one click.
- Live contrast ratio using the W3C relative-luminance formula (WCAG 2.1).
- AA and AAA pass-fail badges for normal and large text.
- Live sample preview of normal and large text in the colors you chose.
WCAG pass thresholds
| Text size | AA passes at | AAA passes at |
|---|---|---|
| Normal text | >= 4.5 | >= 7.0 |
| Large text | >= 3.0 | >= 4.5 |
Common use cases
Typical use: validating a button label against its fill, checking body text on a brand background, or confirming large headings still meet AA before you ship CSS. Use the live preview to judge readability for normal and large text.
For step-by-step clicks see the step-by-step guide; for when this fits versus desktop apps see when to use and vs alternatives.
How color values are read and validated
You do not have to type the long six-digit hex code. A three-digit shorthand like #fff is expanded to the full six-digit form (#ffffff) before the ratio is worked out, so #fff on a white background and #ffffff on a white background give the exact same result. If what you type is not a valid three or six digit hex value, the checker does not guess or show a leftover number from before - the ratio readout resets to a dash until you enter something valid.
The two ways to pick a color behave differently on purpose. Drag the color swatch (the square color picker) and the ratio and badges update on every movement, so you can watch the numbers change as you slide through shades. Type directly into the hex text field instead and the update waits until you click or tab away from that field - useful when you want to type a full code like #3366ff without the ratio recalculating on every half-finished character. Either way, once a valid value lands, the ratio always renders rounded to two decimal places in the X.XX : 1 form used throughout the WCAG spec - for example, near-black text (#111111) on a white background reads as 18.88 : 1, comfortably above every AA and AAA threshold on the page.
All four badges (AA normal, AA large, AAA normal, AAA large) are shown at the same time and each one flips pass or fail on its own, so a single color pair can pass some badges and fail others. A common gray-on-white body-text color, #767676 on #ffffff, comes out to 4.54 : 1 - just over the AA-normal line of 4.5 and over the AAA-large line of 4.5, but under the AAA-normal line of 7.0. Try that pair yourself: the AA normal, AA large, and AAA large badges show PASS while the AAA normal badge shows FAIL, which is exactly the situation many real websites are in without knowing it.
Privacy
Everything runs in the browser with no upload and no account, and closing the tab discards your color picks.
Frequently Asked Questions
What does Color Contrast Checker (WCAG) do?
Check the contrast ratio between text and background colors against WCAG AA and AAA.
How do I use the checker?
Pick a foreground and background color; the ratio and AA / AAA pass-fail results update as you change them.
What formula does the ratio use?
Ratios use the W3C relative-luminance formula from WCAG 2.1.
Can I type a short hex code like #fff instead of #ffffff?
Yes. A three-digit hex code is automatically expanded to the full six-digit form before the ratio is calculated, so #fff and #ffffff give the identical result.
Why did the ratio not update while I was typing a hex code?
Typing in the hex text field only recomputes the ratio once you click or tab away from that field. Dragging the color swatch instead updates the ratio and badges on every movement, with no need to click away.
What happens if I type an invalid hex value?
The checker does not guess or keep showing an old number. If the text you typed is not exactly three or six valid hex digits, the ratio readout resets to a dash until you enter a valid value.
How precise is the contrast ratio number shown?
The ratio is always rounded to two decimal places and shown in the "X.XX : 1" form used in the WCAG spec, for example 18.88 : 1 for near-black text on a white background.