What the Accessibility Contrast Matrix does
This contrast matrix tests every foreground colour in your palette against every background at once and marks each pair against the WCAG 2.2 thresholds: 4.5:1 for normal text, 3:1 for large text and for non-text elements such as input borders and focus rings, and 7:1 or 4.5:1 for AAA. Translucent colours are blended over what sits beneath them before measuring, and every failing pair comes with the nearest colour that would pass.
Checking pairs one at a time misses the combinations nobody thought to try - the muted grey that is fine on white but fails on the grey card, the link colour that passes until it sits on a tinted banner. A matrix shows them all, including hover, disabled and overlay states you tag in the list.
How to use it
- List your foreground colours, one per line, as
Name: colour. Hex,rgb(),hsl()with or without alpha, and CSS colour names all work. - List the backgrounds they can appear on in the same way. Include translucent overlays such as
rgba(17, 24, 39, 0.06); they are painted over the page colour set under the advanced options. - Say how big the text is. Choose normal, large or non-text for untagged lines, or enter the font size and weight and the tool decides. Tag individual lines with
[large],[ui]for component boundaries and icons, or[disabled]for inactive controls, which WCAG exempts. - Read the matrix: each cell shows a sample, the ratio and the level reached. Below it, every failing pair lists the closest foreground or background, at the same hue, that meets your chosen target.
- Download the matrix as CSV for a design review, or copy just the failures into a ticket.
Reading the results
The ratio compares the relative luminance of the two painted colours: (lighter + 0.05) / (darker + 0.05). It runs from 1:1 (identical) to 21:1 (black on white). Values are shown rounded down to two decimals, because WCAG gives no rounding allowance: a pair at 4.499:1 fails a 4.5:1 requirement, and a tool that displayed it as 4.50 would hide that.
AA means Success Criterion 1.4.3 (text) or 1.4.11 (non-text) is met; AAA means 1.4.6 is also met. Large text is at least 24 CSS pixels, or at least 18.66 pixels in bold - the pixel equivalents of 18 and 14 points.
A suggested fix keeps the hue and saturation and changes only lightness, moving the shortest distance that reaches the target. It is a starting point for a designer, not a replacement for a brand decision.
Worked example: a product UI where the button and the placeholder fail
In the Product UI example, white button text sits on #3b82f6. The blue's relative luminance works out at 0.2355 (red 0.0437, green 0.2232 and blue 0.9216 after linearisation, weighted 0.2126, 0.7152 and 0.0722). The ratio against white is 1.05 / 0.2855 = 3.67:1. That passes the 3:1 bar for large text but fails 4.5:1 for the 16-pixel label on a normal button. The tool suggests darkening the button to #1e6ff5 (4.51:1) at the same hue.
The placeholder grey #9ca3af reaches only 2.53:1 on white. Placeholder text is still text, so 4.5:1 applies; the nearest passing grey is #6e7788 at 4.50:1. The secondary text #6b7280 passes on white at 4.83:1 and still passes on the #f9fafb card at 4.62:1. The input border #d1d5db is tagged [ui] and is judged against 3:1, not 4.5:1.
Formulas and scoring rules
- Channel linearisation (sRGB)
c = v / 255; linear = c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4WCAG 2.2's Understanding documents give 0.04045, matching the sRGB standard; the older 0.03928 makes no difference for 8-bit colours.- Relative luminance
L = 0.2126 x R + 0.7152 x G + 0.0722 x B- Contrast ratio
ratio = (L_lighter + 0.05) / (L_darker + 0.05)Displayed rounded down to 2 decimals; compared unrounded.- Alpha blending
painted = fg x a + bg x (1 - a)Per channel, in sRGB, as browsers paint. A translucent background is first painted over the page colour.- Thresholds
normal text 4.5 (AA) / 7 (AAA); large text 3 (AA) / 4.5 (AAA); non-text 3Large = at least 24px, or at least 18.66px bold.
What the ratio does not capture
WCAG 2's formula is a pass/fail test the guidelines are measured against, not a model of perception. It is known to overrate some dark-on-dark pairs and underrate some pairs with saturated colours, and it ignores font weight beyond the large-text rule. The draft APCA method used in WCAG 3 work addresses some of this, but it is not a conformance requirement today, so this tool reports WCAG 2.2 only.
Real text also sits on gradients, photographs and anti-aliased edges. For those, measure the worst area behind the text, or add a solid or translucent backing and test that.
Limitations: what the result does not prove
- It measures colours you give it. It does not read a web page, and it cannot know which pairs actually appear together in your interface - a pair that fails here may never be used.
- Text over images, gradients or video needs checking against the worst part of the background; a single colour cannot represent it.
- Passing contrast does not make a design accessible on its own. Information conveyed by colour alone (1.4.1), focus visibility and text resizing are separate requirements.
- Disabled components are exempt from the contrast criteria, but users still need to understand that they are disabled.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- WCAG 2.2 - checked 19 Sep 2026
- W3C - WCAG 2.2: contrast ratio and relative luminance definitions
- W3C - Understanding Success Criterion 1.4.3 Contrast (Minimum)
- W3C - Understanding Success Criterion 1.4.11 Non-text Contrast
- W3C - Understanding Success Criterion 1.4.6 Contrast (Enhanced)
Frequently asked questions
What contrast ratio does WCAG AA require for text?
4.5:1 for normal text and 3:1 for large text, which is at least 24 CSS pixels, or 18.66 pixels in bold. AAA raises these to 7:1 and 4.5:1. Logos and purely decorative text are exempt, and so is text in an inactive control.
Why does #777 on white fail when it looks readable?
Its ratio is 4.48:1, just under the 4.5:1 minimum for normal text. WCAG sets a line, and there is no rounding up. The nearest mid-grey that passes on white is #767676 at 4.54:1 - one step darker on each channel.
How is a semi-transparent colour measured?
It is blended with whatever is under it, channel by channel, exactly as the browser paints it, and the blended colour is measured. A 50% black overlay on white paints as rgb(127.5, 127.5, 127.5), which gives about 3.98:1. That is why the page colour under translucent backgrounds matters.
Do borders, icons and focus rings need contrast too?
Yes. WCAG 2.2 Success Criterion 1.4.11 asks for 3:1 between the visual parts needed to identify a control or understand a graphic and the colours next to them. Tag those lines [ui] so they are judged against 3:1 rather than the text thresholds.
Do disabled buttons have to meet contrast requirements?
No. Both 1.4.3 and 1.4.11 exempt inactive user interface components. Tag them [disabled] and the matrix marks them exempt. Very faint disabled controls can still confuse people, so many design systems keep them near 3:1 anyway.
How does the nearest passing colour work?
It converts the colour to hue, saturation and lightness, keeps hue and saturation, and searches lightness in both directions for the smallest change that reaches the target ratio. The result is rounded to a hex value and checked again, so the suggestion really passes.
Is APCA or WCAG 3 contrast checked here?
No. APCA is part of draft work for WCAG 3 and is not yet a conformance requirement anywhere, so this tool sticks to the WCAG 2.2 ratio that audits and regulations reference today.
Last reviewed by the A2Z.Tools team against the sources listed above.
