How to Check if Your Website Meets WCAG Color Contrast Requirements

What AA vs AAA actually require

Most product teams target WCAG 2.1 Level AA. For body copy, captions, and form labels that sit at “normal” size, AA means ≥4.5:1 between text color and the surface behind it. AAA is stricter: ≥7:1 for that same normal text. Teams chasing AAA are usually working under a contractual or public-sector bar; AA is the everyday shipping target for commercial sites. The ratio is a single number derived from the relative luminance of each color — not “does it look readable on my monitor.” If marketing picked a soft gray on white because it felt “premium,” run the pair through a checker before you ship; soft gray fails AA more often than designers expect.

Large text and UI components

WCAG treats “large” text differently. Large means 18 point or larger at regular weight, or 14 point or larger when bold. For that size band, AA only requires ≥3:1 and AAA requires ≥4.5:1. That looser bar exists because bigger glyphs already carry more visual weight — but only if you truly meet the point-size rules. A 16px regular paragraph is still normal text. Separately, Success Criterion 1.4.11 covers non-text contrast: graphical objects and user interface components (think button chrome, input borders, icon glyphs that convey state) need ≥3:1 against the colors next to them. Passing body-text AA does not automatically clear 1.4.11 for a pale outline button on a pale card.

Why a ratio tool beats eyeballing

Relative luminance folds red, green, and blue into a single perceived-brightness model. Two colors can look fine to you under bright office lights and still land at 3.2:1 on paper. Red/green pairs that “pop” for some viewers can fail for others. A contrast checker exists to compute that luminance math and map the result onto AA/AAA for normal text, large text, and — when you are checking chrome — the 3:1 non-text floor. SortMyFile’s contrast checker runs that calculation in your browser: paste two hex values and read the ratio plus pass/fail, without uploading a design file.

How to check a color pair on SortMyFile

Open the contrast checker, enter the text (or icon) hex and the background hex, then read the ratio against the AA and AAA rows. If normal text fails 4.5:1, darken the ink or lighten the surface until it clears — then re-check large-text styling and any adjacent UI chrome at 3:1. Keep a short list of approved pairs in your design tokens so marketing and engineering stop inventing one-off gray-on-gray combinations at the last minute.

• Open Contrast Checker
• Paste foreground and background hex colors
• Confirm AA (≥4.5:1 normal / ≥3:1 large) or AAA if required
• Re-check UI borders and icons at ≥3:1 (SC 1.4.11)