# Color contrast checker: WCAG 2.2 AA and AAA contrast ratio

> Contrast ratio compares the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). WCAG 2.2 level AA requires at least 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for icons, borders and other UI components. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Enter two hex colours to check them.

- Interactive version: https://infikeytechnologies.com/tools/color-contrast-checker
- Type: free instant calculator
- Category: Website performance & design
- Last reviewed: 2026-10-05
- Publisher: Infikey Technologies (https://infikeytechnologies.com)

## Example result (default inputs)

| Input | Value |
| --- | --- |
| 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.

Passes AA for all text and AAA for large text.

| Metric | Value |
| --- | --- |
| 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 |

### Contrast ratio vs WCAG thresholds

| Item | Value | Detail |
| --- | --- | --- |
| Your colours (selected) | 4.83:1 |  |
| AAA normal text | 7:1 |  |
| AA normal text | 4.5:1 |  |
| AA large text / UI | 3:1 |  |

- Ratios are truncated to two decimals, not rounded up: 4.499:1 shows as 4.49:1 and fails AA for normal text.

Open this result on the website: https://infikeytechnologies.com/tools/color-contrast-checker?foreground=%236B7280&background=%23FFFFFF

## Use from a link or API

Add these query parameters to https://infikeytechnologies.com/tools/color-contrast-checker (pre-filled page), https://infikeytechnologies.com/tools/color-contrast-checker.md (this plain-text page) or https://infikeytechnologies.com/api/tools/color-contrast-checker (JSON).

| Parameter | Meaning | Accepted values |
| --- | --- | --- |
| `foreground` | Text colour (hex) | free text |
| `background` | Background colour (hex) | free text |

- Grey on white: https://infikeytechnologies.com/tools/color-contrast-checker?foreground=%23999999&background=%23FFFFFF
- White on orange: https://infikeytechnologies.com/tools/color-contrast-checker?foreground=%23FFFFFF&background=%23F97316
- Blue link on white: https://infikeytechnologies.com/tools/color-contrast-checker?foreground=%231A73E8&background=%23FFFFFF
- Light text on dark: https://infikeytechnologies.com/tools/color-contrast-checker?foreground=%23E5E7EB&background=%23111827

## How it is calculated

- **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)

## 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.

## FAQ

### What contrast ratio does WCAG AA require?

4.5:1 for normal text, 3:1 for large text (24 px, or 18.66 px bold) and 3:1 for UI components and meaningful graphics.

### What is the contrast ratio of grey text on white?

It depends on the shade. #767676 on white is about 4.54:1, the lightest neutral grey that passes AA for normal text.

### What is the difference between WCAG AA and AAA?

AA is the level most laws and policies require. AAA is stricter (7:1 for normal text) and is recommended for long-form reading and accessibility-focused services.

### How is contrast ratio calculated?

Each colour is converted to relative luminance, then ratio = (lighter + 0.05) ÷ (darker + 0.05). The formula section shows each step.

## Sources

- [W3C — WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
- [W3C — WCAG 2.2, Success Criterion 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)

## Get expert help

Send these results to an Infikey Technologies specialist from the form on https://infikeytechnologies.com/tools/color-contrast-checker#estimate or via https://infikeytechnologies.com/contact.

More free calculators: https://infikeytechnologies.com/tools.md

## 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.