Colour contrast checker (WCAG 2.2)
Check any two colours against WCAG 2.2: the ratio, and whether it passes for body text, large text and interface parts such as icons and input borders.
In short
WCAG 2.2 asks for a contrast ratio of at least 4.5:1 between text and its background (3:1 for large text, meaning 18 point, or 14 point bold) and 3:1 for icons, borders and other interface parts. The checker below computes the ratio with the W3C formula.
Colour contrast checker
Works todayTwo colours in, the WCAG 2.2 contrast ratio out, with a pass or fail for normal text, large text and interface parts.
Large text, 24 px
Normal text at 16 px reads like this sentence.
Enter a valid three- or six-digit hex colour in each field.
: 1
- Normal textneeds 4.5:1 (AA), 7:1 (AAA)
- Large textneeds 3:1 (AA), 4.5:1 (AAA)
- Icons and bordersneeds 3:1 (AA, 1.4.11)
Formula: W3C WCAG 2.2, relative luminance and contrast ratio, not rounded (4.499:1 fails 4.5:1).
What the numbers mean
The Web Content Accessibility Guidelines, published by the W3C, measure contrast as a ratio from 1:1 (the same colour twice) to 21:1 (black on white). The ratio compares the relative luminance of the two colours, how bright each looks to the eye, using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour.
| What you are checking | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18 point, or 14 point bold) | 3:1 | 4.5:1 |
| Icons, input borders, focus rings (SC 1.4.11) | 3:1 | none set |
The W3C is strict about rounding: the computed ratio is not rounded, so 4.499:1 does not meet 4.5:1. The checker above shows the ratio rounded down to two decimal places for the same reason.
Points that catch people out
- "18 point" is not 18 pixels. The W3C notes that "18 point" and "bold" can mean different things on different systems, so check large text with care.
- Placeholder text counts. If it carries information, it needs the same contrast as other text.
- Text over photos. Check the lightest part of the image behind the text, not the average.
- Brand colours. Check the actual foreground and background pair. A brand colour does not have one contrast score that applies on every surface.
Use the checker on an actual colour pair
Enter a three- or six-digit hexadecimal value for the text and another for its background. The colour pickers provide another way to set the same values. Use Swap to reverse them: the ratio stays the same because the calculation compares the lighter colour with the darker one, while the preview changes which colour is text.
A palette contains colours; a contrast decision concerns a particular pair in a particular use. For example, the same grey could be body text on white, a disabled label on a panel or a border around a control. Record the role with the colours so the result is applied to the element you actually checked.
Reference pairs you can reproduce
These examples use opaque, flat colours and the W3C calculation. The display column follows this tool's convention of rounding down to two decimal places; the pass decision uses the full calculation.
| Text | Background | Displayed ratio | Normal text at AA |
|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | Pass |
| #ffffff | #ffffff | 1.00:1 | Fail |
| #767676 | #ffffff | 4.54:1 | Pass |
| #777777 | #ffffff | 4.47:1 | Fail |
The last two examples are deliberately close to the boundary. A small colour change can move a pair across the threshold. Choose a pair with some margin rather than relying on a rounded label that makes a failing value look sufficient.
Check states, not just the default screen
For a form, make a short inventory: field labels, entered text, help text, error messages, buttons and the visible boundaries needed to identify controls. Then check relevant hover, selected, focus and error states. Do the same on each surface where the component appears, including a dark theme if the product has one.
A practical record can be as simple as “error message, dark red text on pale red panel, normal text, AA result”. Keep the colour values with that note. If the background changes later, the old result does not prove that the new pair passes.
Do not label a whole design system accessible because one example button passes. The design systems guide explains how documented component states and shared rules can make repeated checks more manageable.
What two hexadecimal values cannot tell you
This tool calculates the contrast between two opaque colours. It does not inspect a screenshot or automatically determine the final background behind transparent text, a gradient, video or a photograph. Establish the actual displayed pair, including variation behind the text, before treating a result as evidence for that element.
It also does not determine whether a font qualifies as large text, whether a particular component is covered by an exception, or whether keyboard access, labels and focus behaviour are correct. Those require separate checks. A contrast pass is one result about one pair, not a WCAG conformance certification for a page or product.