Это текст обычного размера: так выглядит выбранное соотношение контраста.
Tool guide
You set two colors — a background and a text or accent — and the page computes their contrast ratio using the WCAG 2.1 relative luminance formula, then tells you whether the pair clears AA or AAA. A live preview shows the type on that background, so the call is made by eye as well as by number. The math runs locally and the color values never travel anywhere. It is the check you run before an accessibility audit, before shipping a design system token, or when a pale grey caption on a white card turns unreadable on a phone in daylight. See also: give a colour an alpha channel in RGBA, pick a shade by hand and copy its code, tune lightness through HSL values.
Body text needs at least 4.5:1 for AA and 7:1 for AAA. Large text — 18pt regular or 14pt bold and up — only needs 3:1 for AA and 4.5:1 for AAA. Non-text UI parts such as input borders and icons target 3:1. The number in the «COLOR SIGNAL» panel updates the moment either color changes.
The first button solves legibility: it derives a type color that is reliably readable on the background you chose. The second solves composition: it takes the opposite hue on the color wheel, which gives a punchy pair for accents and banners. A complementary color looks good but does not always pass — check the ratio after pressing it.
Not directly — the calculator compares two solid colors. The practical trick is to sample the lightest and the darkest part of the backdrop and test your type against both. If either one fails AA, put a translucent scrim or a shadow behind the text, otherwise some readers will lose it entirely.
The ratio only measures luminance. It knows nothing about weight, size, serifs or chromatic fringing, so thin light type on saturated blue can clear AA and still shimmer. That is why a live preview sits next to the number — trust your eyes as much as the score.
Contrast is computed from relative luminance, which is the same across color vision types — that is precisely what makes WCAG useful for deuteranopia and protanopia. Still, a red and a green of equal luminance stay indistinguishable by hue, so never encode meaning in color alone; add an icon or a label.
Nowhere. Both HEX values live in the form fields and in the tab's JavaScript memory, and the luminance math runs on the spot. Closing the tab discards everything, so copy the values you want before you leave — no history of tested pairs is kept.
Yes. Record the two HEX values and the ratio the tool reports for each token in your design system; that pairing is what an accessibility reviewer asks for. Just re-test after any brand refresh, because a small tweak to a background often pushes a borderline 4.6:1 below the AA line.
Before: Background #FFFFFF, text #B0B0B0 — ratio 2.3:1, fails AA
After: Text darkened to #6B6B6B — ratio 5.1:1, passes AA for body copy
Before: Background #050505, accent #FA551E — 6.1:1, AA yes, AAA no
After: After «Optimal Text Accent» — a lighter accent comfortably above 7:1
Your rating and feedback help decide what to improve next.
