How this calculator works
| Metric | Formula |
|---|---|
| Channel to linear | c = value ÷ 255; linear = c ÷ 12.92 if c ≤ 0.04045, else ((c + 0.055) ÷ 1.055)^2.4 |
| Relative luminance | L = 0.2126 R + 0.7152 G + 0.0722 B |
| Contrast ratio | (L lighter + 0.05) ÷ (L darker + 0.05) |
Worked example
With these inputs:
- Text colour (hex): #6B7280
- Background colour (hex): #FFFFFF
Contrast ratio: 4.83:1. #6B7280 on #FFFFFF has a contrast ratio of 4.83:1 — passes WCAG AA for normal text.
| Contrast ratio | 4.83:1 |
|---|---|
| AA — normal text (≥ 4.5:1) | Pass |
| AA — large text (≥ 3:1) | Pass |
| AA — UI components & graphics (≥ 3:1) | Pass |
| AAA — normal text (≥ 7:1) | Fail |
| AAA — large text (≥ 4.5:1) | Pass |
Open this example in the calculator
WCAG contrast requirements
| Content | Level AA | Level AAA | WCAG criterion |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 / 1.4.6 |
| Large text (24 px, or 18.66 px bold) | 3:1 | 4.5:1 | 1.4.3 / 1.4.6 |
| Icons, form borders, focus indicators, charts | 3:1 | — | 1.4.11 |
| Logos and disabled controls | Exempt | Exempt | — |
Common contrast mistakes
- Light grey body text or placeholder text on white.
- White text on bright brand colours such as yellow, orange or light green.
- Text over photos without an overlay.
- Form fields whose borders are too faint to see.
- Links distinguished only by a slightly different colour.
Why contrast matters for business
Good contrast helps everyone read on phones in sunlight, and is essential for people with low vision or colour blindness. Accessibility is a legal requirement in many places — for example under the European Accessibility Act and the ADA in the US — and accessible sites usually convert better.
Open this calculator with your numbers
Every option can be set in the web address, so you can bookmark a scenario or send it to a colleague. AI assistants such as ChatGPT, Gemini, Claude and Perplexity can use the same parameters to open this calculator with your numbers and the result already on the page.
| Parameter | What it sets | Accepted values |
|---|---|---|
foreground |
Text colour (hex) | free text |
background |
Background colour (hex) | free text |
Also available as plain text for AI assistants and a free JSON API (OpenAPI spec).
Sources
- W3C — WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum)
- W3C — WCAG 2.2, Success Criterion 1.4.11 Non-text Contrast
Last reviewed by the Infikey Technologies team.
Disclaimer
This calculator is provided free for general information and planning only. Results are estimates based on the inputs you enter and the assumptions described on this page, reference data such as published prices may change, and actual costs and outcomes will differ. Nothing on this page is financial, legal, tax, investment or other professional advice. Infikey Technologies Private Limited, Infikey Technologies LLC and their directors, employees and affiliates make no warranty, express or implied, about the accuracy, completeness or suitability of this tool or its results, and accept no liability for any loss or damage, direct or indirect, arising from its use or from reliance on its results. Verify all figures independently and seek professional advice before making any decision. Use of this tool is at your own risk.