WCAG contrast checker: the ratio between two colours

Colour contrast ratio calculator

Enter colours as a hexadecimal value, for example #1C5D4F, or pick them with your browser's colour picker.

Text colour (foreground)

Format #RRGGBB or #RGB.

Background colour

Format #RRGGBB or #RGB.

Result against WCAG 2.2

Requirement	Minimum ratio	Result
AA, normal text [1]	4.5:1
AA, large text [1]	3:1
AAA, normal text [2]	7:1
AAA, large text [2]	4.5:1
AA, graphics and user interface components [3]	3:1

Large text means 18 pt (24 px) or larger, or 14 pt (18.66 px) or larger in bold. [1]

How the ratio is calculated

The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L is the relative luminance of the lighter and the darker colour. Values run from 1:1 (two identical colours) to 21:1 (black on white). The definition and the formula come from WCAG itself. [7]

What a contrast checker does not tell you

• Text over an image or a gradient sits on many colours. Measure the worst spot, not the average.
• Disabled controls and purely decorative text are exempt from 1.4.3. That is an exception in the specification, not a reason to ignore them in design. [1]
• States count separately: hover, focus and active have their own colours and their own ratio.
• Form field borders, icons and the focus indicator fall under 1.4.11 at 3:1, not under 4.5:1. [3]
• Colour must never be the only carrier of information. That is criterion 1.4.1, and a contrast checker cannot answer it.

WCAG 2.2 and level AA

WCAG 2.2 is a W3C Recommendation and adds nine new success criteria to WCAG 2.1. Level AA is the level that EN 301 549 clause 9 adopts, from WCAG 2.1. Sites are tested against that standard in practice; on its own it does not establish that a site complies with the law. [4] [8]

WCAG 2.2 AA checklist: the criteria about contrast and sight

• 1.4.3 Contrast (Minimum): text 4.5:1, large text 3:1.
• 1.4.6 Contrast (Enhanced) is level AAA: 7:1 and 4.5:1.
• 1.4.11 Non-text Contrast: graphics and controls 3:1.
• 1.4.1 Use of Color: colour is never the only carrier.
• 1.4.4 Resize Text: 200 percent without losing content or function.
• 1.4.12 Text Spacing: spacing must be adjustable without loss.
• 2.4.11 Focus Not Obscured (new in 2.2, level AA).
• 2.5.8 Target Size (Minimum): 24 by 24 px (new in 2.2, level AA).

What WCAG 2.2 added

Nine new criteria. At level AA: 2.4.11 Focus Not Obscured (Minimum), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum) and 3.3.8 Accessible Authentication (Minimum). At level A: 3.2.6 Consistent Help and 3.3.7 Redundant Entry. Criterion 4.1.1 Parsing was marked obsolete. At level AAA: 2.4.12 Focus Not Obscured (Enhanced), 2.4.13 Focus Appearance and 3.3.9 Accessible Authentication (Enhanced). [5]

There is no WCAG 2.3

It is searched for often, but no version 2.3 was ever published. The current published version is WCAG 2.2. The next generation is being drafted as WCAG 3.0 and is still a W3C Working Draft, not a standard anyone can be held to today. [6]

Sources

• [1] W3C: WCAG 2.2, Success Criterion 1.4.3 Contrast (Minimum), Level AA.
• [2] W3C: WCAG 2.2, Success Criterion 1.4.6 Contrast (Enhanced), Level AAA.
• [3] W3C: WCAG 2.2, Success Criterion 1.4.11 Non-text Contrast, Level AA.
• [4] W3C: Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation.
• [5] W3C: What's New in WCAG 2.2.
• [6] W3C: WCAG 3 Introduction (W3C Working Draft, not a standard).
• [7] W3C: WCAG 2.2, relative luminance and contrast ratio definitions.
• [8] ETSI EN 301 549 V3.2.1, clause 9 (web), which adopts WCAG 2.1 Level AA.