Plain Figures Creative

Colour contrast checker (WCAG 2.2)

Work out the contrast ratio between text and background colour with the WCAG 2.2 formula and see which success criteria (1.4.3, 1.4.6, 1.4.11) are met.

Contrast ratio

15.24:1

The sample text shows the colour combination.

Large text

CriterionRequiredResult
1.4.3 (AA) · Normal text4.5:1✓ Met
1.4.3 (AA) · Large text3.0:1✓ Met
1.4.6 (AAA) · Normal text7.0:1✓ Met
1.4.6 (AAA) · Large text4.5:1✓ Met
1.4.11 (AA) · UI components and graphics3.0:1✓ Met

How it works

For each colour the relative luminance is calculated as WCAG 2.2 defines it for the sRGB colour space; the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter colour. It ranges from 1:1 to 21:1.

WCAG 2.2 thresholds: text 4.5:1 and large text 3:1 for level AA (1.4.3); 7:1 and 4.5:1 for level AAA (1.4.6); 3:1 for user interface components and graphics (1.4.11). Large text means at least 18 point, or 14 point bold.

The ratio is shown cut to two decimals, so a value just below a threshold (4.499) never appears as 4.50; the comparison uses the exact value. The tool does not account for transparency, gradients, background images or the criteria's exceptions (decorative text, logos).

Sources