Why are the border and focus colors judged at 3:1?

They are non-text interface components, covered by success criterion 1.4.11, which sets a 3:1 requirement independent of text size or weight.

Will applying a suggested fix change my brand color?

Only the role you apply it to, and only when you click it. Suggestions target foreground roles and keep the original hue and chroma, so button fills and brand colors stay as you entered them.

Does passing every row mean the interface is WCAG compliant?

No. These are contrast results for specific opaque pairs. Keyboard access, focus order, semantics, motion, text alternatives and content requirements all still need evaluating.

WCAG Accessibility Checker

Palette audit

Text target

Background

Surface

Body text

Secondary text

Button fill

Button text

Input boundary

Focus indicator

Text styles

Body text (px)

Secondary text (px)

Button text (px)

Color specimens

A fresh perspective.

Monday, 14 September.

Continue

A fresh perspective.

Monday, 14 September.

Continue

2 failing color pairs

WCAG 2.2

Solid-color contrast only. These results do not certify a website's accessibility.

Color pair	Ratio	Required	Result
Body / backgroundNormal text / AA	14.680:1	4.5:1	Pass
Body / surfaceNormal text / AA	13.492:1	4.5:1	Pass
Secondary / backgroundNormal text / AA	5.008:1	4.5:1	Pass
Secondary / surfaceNormal text / AA	4.603:1	4.5:1	Pass
Button text / fillNormal text / AA	4.825:1	4.5:1	Pass
Input boundary / backgroundNon-text / AA	2.875:1	3:1	Fail
Input boundary / surfaceNon-text / AA	2.642:1	3:1	Fail
Focus / backgroundNon-text / AA	3.794:1	3:1	Pass
Focus / surfaceNon-text / AA	3.487:1	3:1	Pass

WCAG report CSV

"Pair","Foreground","Background","Contrast ratio","Required ratio","Level","Criterion","Text class","Result"
"Body / background","#202a2d","#ffffff","14.680250540934097","4.5","AA","1.4.3","Normal text","Pass"
"Body / surface","#202a2d","#f2f6f7","13.492433754648495","4.5","AA","1.4.3","Normal text","Pass"
"Secondary / background","#667177","#ffffff","5.007882758660986","4.5","AA","1.4.3","Normal text","Pass"
"Secondary / surface","#667177","#f2f6f7","4.602682098910579","4.5","AA","1.4.3","Normal text","Pass"
"Button text / fill","#ffffff","#167d8d","4.825169900202744","4.5","AA","1.4.3","Normal text","Pass"
"Input boundary / background","#8c9b9f","#ffffff","2.8750312752190337","3","AA","1.4.11","Non-text","Fail"
"Input boundary / surface","#8c9b9f","#f2f6f7","2.6424051085007663","3","AA","1.4.11","Non-text","Fail"
"Focus / background","#d85d34","#ffffff","3.7939605254343483","3","AA","1.4.11","Non-text","Pass"
"Focus / surface","#d85d34","#f2f6f7","3.4869814322608397","3","AA","1.4.11","Non-text","Pass"

Auditing a palette, not a single pair

An interface palette fails in the combinations, not in the individual colors. This checker takes eight roles at once — background, surface, body text, secondary text, button fill, button text, input boundary and focus indicator — and evaluates every pair that actually touches in a typical layout.

Body and secondary text are checked against both the page background and raised surfaces, because a secondary label that passes on white can fail on a tinted card. Button text is checked against the button fill rather than the page.

Size and weight change the requirement

The threshold a text pair must meet depends on how the text is rendered. Set the size and weight for each text role and the required ratio adjusts: text at 24 pixels or more, or bold text at roughly 18.67 pixels or more, qualifies for the large-text thresholds of 3:1 at AA and 4.5:1 at AAA.

The input boundary and focus indicator are non-text roles. They are held to the 3:1 requirement under success criterion 1.4.11 regardless of any text setting.

Fixes are explicit, and the scope is bounded

Failing rows offer a suggested replacement that preserves the original hue and chroma. Nothing is changed until you apply it, so the palette you entered is never silently rewritten. The CSV report lists every pair with its measured ratio, required ratio, level and success criterion.

The audit covers opaque color pairs. Text over images or gradients, semi-transparent overlays, and every non-color WCAG requirement fall outside it. An AA or AAA result here is evidence about these pairs, not certification of a finished product.

Frequently asked questions

The contrast checker measures one foreground and background combination. This tool takes an eight-role palette and evaluates every pair that touches in a real layout, including text on both background and surface.