WCAG contrast ratios: what passes, and what to test
Use the right threshold for the text size, then check the colours your page actually renders.
Free toolContrast CheckerCheck WCAG 2.2 colour ratios, preview text and copy AA, AAA and UI pass levels.Check your coloursWhat ratio do you need?
Normal text needs 4.5:1 for AA or 7:1 for AAA. Qualifying large text needs 3:1 or 4.5:1 respectively.
| Use | Minimum | WCAG 2.2 criterion |
|---|---|---|
| Normal text, AA | 4.5:1 | 1.4.3 Contrast (Minimum) |
| Large text, AA | 3:1 | 1.4.3 Contrast (Minimum) |
| Normal text, AAA | 7:1 | 1.4.6 Contrast (Enhanced) |
| Large text, AAA | 4.5:1 | 1.4.6 Contrast (Enhanced) |
| Required UI and graphical information, AA | 3:1 against adjacent colours | 1.4.11 Non-text Contrast |
The thresholds are inclusive. Exactly 4.5:1 passes AA normal text. A ratio of 4.499:1 fails, even if rounded to 4.50.
Passing these tests addresses contrast criteria only. Keyboard access, labels, structure, colour-independent cues and other requirements still apply.
What counts as large text?
Large text is at least 18 points regular or 14 points bold. In CSS pixels, that is 24px or about 18.667px.
| Example | Which threshold? |
|---|---|
| 16px regular body text | Normal text |
| 18px bold label | Normal text, below the bold size boundary |
| 19px bold heading | Large text |
| 24px regular heading | Large text |
A heading tag alone does not make text large. Inspect the rendered font size and weight. Do not rely on zoom to qualify small text.
How is the contrast ratio calculated?
WCAG compares relative luminance after linearising sRGB channels. It is not a comparison of HSL lightness or raw RGB averages.
Linearise each channel
Scale RGB channels to 0 through 1. For a channel c at or below 0.04045, use c / 12.92. Otherwise use ((c + 0.055) / 1.055)2.4.
Calculate luminance
Use L = 0.2126R + 0.7152G + 0.0722B, where R, G and B are the linearised channels.
Compare the pair
Use (lighter L + 0.05) / (darker L + 0.05). Compare the full result with the threshold before rounding.
Black and white give 21:1. Identical colours give 1:1. Swapping the text and background colours does not change the mathematical ratio.
Why a barely different grey can change the result
#777777 fails AA normal text over white. #767676 passes. Each RGB channel differs by only one value out of 255.
| Text over white | Calculated ratio | AA normal |
|---|---|---|
| #777777 | 4.478089453577214:1 | Fail |
| #767676 | 4.542224959605253:1 | Pass |
| #888888 | 3.5448862152994005:1 | Fail |
These synthetic examples were calculated with floi’s contrast module on 4 October 2026. They are reproducible in the contrast checker.
Aim for some room above the threshold. A mathematical pass close to the limit may still look weak with thin strokes.
Check transparency and image backgrounds at the rendered colour
Transparent text must be compared after compositing over the background. The source colour alone does not describe what you see.
For ordinary sRGB source-over blending on an opaque background, calculate each displayed channel as alpha × foreground + (1 − alpha) × background. Different blend modes or colour spaces need their actual rendering method.
| Situation | What to test |
|---|---|
| 50% black over white | The resulting RGB channels are 127.5, not 0. Enter rgb(127.5 127.5 127.5) against white. |
| Text over a gradient | Find the least contrasting region behind the text. A passing endpoint does not prove the whole line passes. |
| Text over a photo | Test behind the actual glyphs across image crops and screen sizes. A solid background or overlay can make this more predictable. |
| Wide-gamut design colour | Test the actual sRGB fallback if using this checker. A silently clipped P3 value may not be your intended colour. |
floi’s checker refuses transparent and out-of-sRGB inputs. The colour converter helps inspect representations and clipping, but it is not a page sampler.
UI contrast needs the right neighbouring colour
Compare required boundaries, icons and state indicators with the colours immediately beside them. Text inside a control is checked separately.
A dark button label can pass against the button fill while its necessary outline fails against the page. Test both relevant pairs.
| Element | Relevant checks |
|---|---|
| Input field | Text against the input fill; a boundary against the surrounding surface when needed to identify the field. |
| Selected checkbox | The mark or other required selected-state cue against its adjacent colour. |
| Chart | Graphical information required to understand it. Add labels or patterns so colour is not the only cue. |
| Focus indicator | Contrast with adjacent colours, alongside applicable focus visibility and appearance criteria. |
Inactive controls have exceptions under text and non-text contrast criteria. Logotypes and incidental text also have specific text-contrast exceptions. Ordinary placeholder text is not automatically exempt.
Do not apply an exception merely because something looks decorative. Read the criterion and decide whether the information is required for the task.
How to test a real page
Use a colour-pair calculator for deliberate choices, then inspect the rendered page and interaction states.
Inspect the actual styles
Use browser developer tools to find computed colour, background, size and weight. Check inherited values and transparency.
Check every relevant state
Test default, hover, focus, selected and error states in both themes. Check mobile crops for text over images.
Review beyond a scanner
Run an accessibility scanner, then inspect image backgrounds and complex components manually. Automated coverage is incomplete.
| Method | When to use it |
|---|---|
| floi Contrast Checker | Opaque sRGB colour pairs, modern colour notation and a copied report with explicit thresholds. |
| WebAIM Contrast Checker | Includes a foreground alpha control, lightness adjustment and specialist links. These controls were inspected on 4 October 2026. |
| Coolors Contrast Checker | Includes live previews and a Click to fix control. The interface was inspected on 4 October 2026. |
| WAVE browser extension | Investigate a rendered page. Review automated results and complex backgrounds manually. |
APCA is a separate method
APCA evaluates contrast differently and is explored in draft WCAG 3 work. Its scores are not WCAG 2 ratios.
Use WCAG 2.2 criteria when reporting WCAG 2 conformance. Do not label an APCA score as an AA or AAA pass.
Sources
The WCAG 2.2 relative luminance definition gives the formula. Understanding Contrast (Minimum) covers text size, thresholds and exceptions.
Understanding Non-text Contrast explains adjacency and required visual information. WCAG 3 is draft work, not a replacement conformance standard.