Accessibility
Brand colour contrast calculator
Enter a mark colour and a background as HEX to get the WCAG 2.2 contrast ratio. Have a logo file instead? The logo contrast checker picks colours from your image.
3- or 6-digit HEX, with or without #: #1B3A6B, 1b3a6b or #FFF.
Only archive brands with a recorded primary colour are listed. Recorded colours come from archive artwork and may differ from an official brand specification.
The sample name and square use the mark colour on the background.
Ratios are truncated, not rounded up: 4.49:1 does not pass a 4.5:1 threshold.
How to check a brand colour pair
- Enter the mark colour as a 3- or 6-digit HEX value, or load a brand's recorded colour from the archive.
- Enter the background the mark will sit on, or choose one of the common backgrounds.
- Read the ratio and the rows below it. Each row shows whether the pair reaches that WCAG threshold.
- Swap the colours to test a reversed version, then copy the link to share the exact pair.
Worked example
The sample navy #1B3A6B measured against three backgrounds:
| Background | Ratio | Result |
|---|---|---|
| #FFFFFF white | 11.26:1 | Passes: Graphics and UI components (context dependent), Large text AA, Normal text AA, Large text AAA, Normal text AAA |
| #1A1815 near-black ink | 1.57:1 | Below every threshold |
| #9B3223 stamp red | 1.54:1 | Below every threshold |
A mark that works on white can disappear on a dark or saturated ground. Where a pair falls below 3:1, use a reversed or single-colour version of the logo instead of adding an outline at the point of use.
What the thresholds mean
| Check | Minimum ratio |
|---|---|
| Graphics and UI components (context dependent) | 3:1 |
| Large text AA | 3:1 |
| Normal text AA | 4.5:1 |
| Large text AAA | 4.5:1 |
| Normal text AAA | 7:1 |
WCAG text contrast requirements exempt logotypes and brand names; non-text contrast requirements depend on the graphic's purpose and context. These ratios do not certify a logo or page. Read the WCAG exceptions. The exemption does not cover brand colours reused for body text, buttons, links or charts; those still need the text and graphics thresholds.
Questions about colour contrast
Does a logo have to meet WCAG contrast ratios?
WCAG 2.2 exempts text that is part of a logo or brand name from its text contrast requirement (1.4.3). Non-text contrast (1.4.11) asks for 3:1 only for graphics needed to understand the content, so whether it applies to a logo depends on how the logo is used. The ratio here is a measurement, not a certification of a logo or page.
WCAG 2.2: Understanding contrast (minimum) · Understanding non-text contrast
How is the contrast ratio calculated?
Each HEX colour is converted to its relative luminance from the sRGB values, and the ratio is (lighter + 0.05) ÷ (darker + 0.05). It runs from 1:1 for two identical colours to 21:1 for black on white. The order of the two colours does not change the ratio.
Why does 4.49:1 not pass the 4.5:1 threshold?
WCAG thresholds are exact. This calculator truncates the ratio to two decimals instead of rounding it up, so a pair that measures 4.499:1 shows 4.49:1 and fails normal-text AA.
Where do the archive brand colours come from?
Only brands with a primary colour recorded in the archive are listed. Recorded colours are sampled from archive artwork and may differ from an official brand specification, so confirm important values against the brand’s own guidelines.
Continue