Tools — 01
Contrast is the difference between a decision and an obstacle.
A ratio is not a formality. Below 4.5:1 a paragraph stops being readable for a large part of your audience, and nobody files a bug about it — they simply leave. This checks two colours against the WCAG thresholds, including the Vantra palette, and computes everything on your machine.
Contrast checker
Foreground preset
Token --color-ink
Background preset
Token --color-paper
Preview
Body copy at 17px. If this sentence takes effort to read, the ratio below is telling you the truth.
Contrast ratio
16.72:1
3 of 3 thresholds met.
AA Normal
Pass4.5:1 — Body text under 24px
AA Large
Pass3:1 — From 24px, or 19px bold
AAA Normal
Pass7:1 — Enhanced, body text
/* Contrast 16.72:1
* foreground: --color-ink (#001619)
* background: --color-paper (#f5f2f3)
* AA Normal (4.5:1): pass
* AA Large (3:1): pass
* AAA Normal (7:1): pass
*/
color: #001619;
background-color: #f5f2f3;Reference
WCAG 2 contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colour. Ratios run from 1:1 to 21:1. Body text needs at least 4.5:1 to pass WCAG AA.
What contrast ratio does text need to pass WCAG?
Text under 24px needs 4.5:1 against its background for WCAG 2.2 AA (success criterion 1.4.3). Text from 24px, or from 19px when bold, is treated as large text and needs 3:1.
AAA raises normal text to 7:1 and large text to 4.5:1. Non-text elements such as input borders and focus indicators need 3:1 under criterion 1.4.11.
How is the contrast ratio actually computed?
Each channel is converted from 0–255 to a 0–1 fraction, linearised — divided by 12.92 below the low-end threshold, otherwise raised to the power 2.4 after an offset — and weighted 0.2126 red, 0.7152 green, 0.0722 blue. That weighted sum is relative luminance.
The two luminances are then compared as (lighter + 0.05) / (darker + 0.05). The 0.05 term is why the scale tops out at 21:1 rather than infinity, and why pure black on pure white is 21:1 exactly.
Green dominates the result because human vision is most sensitive to it. This is why two colours that look equally dark can differ by more than a full ratio point.
Why does a passing ratio still look wrong on screen?
The ratio is computed from the two colours you supply, but the browser paints the colour that survives the cascade. Inherited opacity, a semi-transparent overlay, or a theme variable resolved differently at runtime all change the real background.
Measure the rendered result, not the design token. This is the specific gap the Accessibility Auto-Fixer exists to close: it reads computed styles on the live page rather than the source.
| Content | Level AA | Level AAA | Criterion |
|---|---|---|---|
| Body text, under 24px | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| Large text, 24px+ or 19px bold | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| UI components and graphics | 3:1 | No higher requirement | 1.4.11 |
| Disabled controls, decorative text | Exempt | Exempt | 1.4.3 |
| Logotypes | Exempt | Exempt | 1.4.3 |
Common questions
- Is 3:1 enough for body text?
- No. 3:1 is the WCAG AA minimum for large text only — 24px and above, or 19px and above when bold. Body text under 24px needs 4.5:1.
- Does the contrast checker send my colours anywhere?
- No. The ratio is computed in your browser from the two hex values you enter. There is no request to any server, no account, and nothing stored.
- What is the highest possible contrast ratio?
- 21:1, which is pure black (#000000) against pure white (#ffffff). The lowest is 1:1, which is any colour against itself.
- Do WCAG contrast rules apply to icons and borders?
- Yes, at 3:1. Success criterion 1.4.11 Non-text Contrast covers the visual information needed to identify UI components and states, including input borders, focus indicators and meaningful parts of graphics.