The ratio is a useful number, not a decoration
Color contrast compares the relative luminance of a foreground color with its background. White on white has a contrast ratio of 1:1, the minimum. Black on white reaches 21:1, the maximum in this model.
For WCAG 2.x Level AA, normal text generally needs 4.5:1 contrast and large text needs 3:1. AAA raises those thresholds to 7:1 for normal text and 4.5:1 for large text. A ratio of 4.49 is not a passing 4.5 simply because a display rounds it.
Large text doesn't mean 'pretty big'
The relaxed threshold applies to a defined size: approximately 24 CSS pixels for ordinary-weight text or about 18.5 CSS pixels when bold, using the W3C's point-to-pixel guidance. Smaller navigation labels, card descriptions and form errors usually need the normal-text threshold.
That is why a color combination can pass AA large text while failing AA normal text. It isn't a contradiction; the requirements differ.
Test real combinations, not just brand swatches
Pick the colors used in a button label and its actual button background. Then test footer links, placeholder-like hints, card metadata and navigation text. A palette's light green can be beautiful on a dark surface and nearly invisible on a pale one.
The RezSat Color Contrast Checker shows both a live preview and four clear AA/AAA pass or fail checks. Use its swap function to see whether reversing the colors creates a better combination. The checker calculates against the actual hex values you enter.
Passing the ratio won't fix every accessibility problem
Contrast is only one part of accessibility. A button can have excellent text contrast and still be impossible to activate with a keyboard. A form can be readable but confusing without a proper label. Meaningful errors, focus states and scaling matter just as much.
Use the contrast checker as a first pass. For important public sites, combine it with keyboard testing, zoom testing, semantic markup and W3C guidance. Don't advertise a single passing color pair as a full accessibility audit.
One simple workflow for a small design team
Before handing off a design, list the main text/background pairs: body copy, subdued text, primary buttons, form borders and status messages. Check the text ratios and note which visual states still need a manual review.
If a combination fails, changing either color can help. A small adjustment to brightness often preserves the character of the palette more successfully than replacing the entire brand color.
Useful links and sources
These links point to the original tool or official documentation. Features and free-tier limits may change.
- W3C — Understanding Contrast (Minimum) — Official thresholds, text sizes and exceptions
- WCAG 2.2 Recommendation — Broader current accessibility requirements