The Most Useful Site in the World⚡ The short version
Enter a foreground and background colour. The tool calculates the WCAG 2.1 contrast ratio and tells you whether the combination passes AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 and 4.5:1 respectively). Black on white is 21:1 — the maximum. White on white is 1:1 — invisible.
The calculator
How to use it
- Foreground colour — the text or icon colour. Enter a hex code (#ffffff) or use the colour picker.
- Background colour — what the text sits on. If the background is an image or gradient, sample the lightest or darkest area that text crosses.
- Read the ratio and the compliance badges. AA is the legal minimum in most accessibility regulations; AAA is the higher standard. Normal text needs 4.5:1 (AA) or 7:1 (AAA); text at 18pt or 14pt bold and above needs 3:1 (AA) or 4.5:1 (AAA).
- Check UI components too. WCAG 2.1 requires 3:1 for graphical objects and UI components (icons, form borders, focus indicators) — the tool reports this as well.
Worked example
Foreground: #1a1a2e (dark navy). Background: #f5f5f5 (off-white). The tool computes the relative luminance of each colour using the WCAG formula: L = 0.2126×R + 0.7152×G + 0.0722×B (after linearising the sRGB values).
The lighter colour's luminance plus 0.05, divided by the darker colour's luminance plus 0.05, gives the ratio. For #1a1a2e on #f5f5f5 the ratio is approximately 15.1:1 — a comfortable pass at every WCAG level: AAA for normal text (needs 7:1), AAA for large text (needs 4.5:1), and well above the 3:1 threshold for UI components.
Now try #777777 on #ffffff: the ratio is about 4.48:1 — a narrow fail for AA normal text (needs 4.5:1) but a pass for large text and UI components. This is the kind of near-miss that catches designers in audits.
What contrast ratio alone cannot tell you
- Font rendering and anti-aliasing. The ratio is a mathematical property of the two colours; it does not account for how a particular font renders at a particular size on a particular screen. Thin fonts at small sizes need higher contrast than the minimum to be legible in practice.
- Background images and gradients. If text sits on a photo or gradient, the effective contrast varies across the text. Sample the worst case, not the best.
- Cognitive accessibility. High contrast helps, but clear language, consistent layout and predictable interactions matter at least as much for many users.
- Colour is not the only signal. WCAG 1.4.1 requires that colour is not the sole means of conveying information. A green/red pass/fail needs a text label or icon as well.
🛠️ Related tools
❓ Frequently asked questions
What is the WCAG contrast ratio?
The contrast ratio measures the difference in perceived brightness between two colours, ranging from 1:1 (identical) to 21:1 (black on white). The WCAG 2.1 guidelines require 4.5:1 for normal-sized text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA) and 4.5:1 for large text (AAA).
What counts as large text for WCAG?
Text that is at least 18pt (24px) or at least 14pt (18.66px) bold. Large text has a lower contrast requirement (3:1 for AA instead of 4.5:1) because larger characters are easier to read at lower contrast. Body text at 16px is normal text, not large.
Do I need to meet AAA or is AA enough?
AA is the minimum required by most accessibility laws (the Equality Act in the UK, the ADA in the US, the European Accessibility Act). AAA is the enhanced standard and is recommended where practical, but the guidelines do not require AAA for all content — it is aspirational for many organisations.
How is the contrast ratio calculated?
The WCAG formula converts each colour's sRGB values to linear light, computes a relative luminance (L = 0.2126R + 0.7152G + 0.0722B), then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. The result is a ratio from 1:1 to 21:1.