Question 1

What is WCAG contrast?

Accepted Answer

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background so people with low vision, color blindness, or older displays can still read your site. The math is a luminance ratio in the range 1 (no contrast) to 21 (max contrast).

Question 2

What's the difference between AA and AAA?

Accepted Answer

AA is the practical legal threshold most countries use. Normal text needs ≥ 4.5:1, large text (≥ 18pt regular or ≥ 14pt bold) needs ≥ 3:1. AAA is stricter — 7:1 normal, 4.5:1 large — and is recommended for content aimed at users with significant visual impairments.

Question 3

Why a 5×5 grid instead of just one combo?

Accepted Answer

Because a brand isn't one color pair. It's a palette where any color might end up as text on any other. The grid surfaces all 20 viable combos in one view so you can see at a glance which ones are safe to use anywhere on your site.

Question 4

Does this check non-text contrast?

Accepted Answer

We check text contrast (AA/AAA Normal + Large) and the WCAG 1.4.11 ≥ 3:1 threshold for UI components like buttons, focus rings, and icons. We don't currently check decorative graphic non-text elements (those have nuance the spec leaves to designer judgment).

Question 5

Is anything sent to a server?

Accepted Answer

No. The entire check runs in your browser — the page is statically rendered, the math is in JavaScript, and your colors never leave your device. Zero API call, zero cookie, zero rate limit.

Brand & Identity

Content & Copy

Visual Assets

Legal & Ops

Color Contrast Checker that grades your whole palette

Ship a website that actually passes

How it works

Drop in colors

We grade in real time

Take it to your site

Questions

Related tools