Low contrast is one of the most common accessibility failures. Soft gray on white can look “premium” in a bright office and still fail WCAG 2.1 AA. SortMyFile’s contrast checker computes relative luminance ratios locally so you can validate design tokens before handoff — without uploading mockups.
How to use the WCAG color contrast checker
Enter two hex colors (text and background). Read the ratio and whether it passes AA/AAA for normal and large text. Re-check UI chrome (borders, icons) against the 3:1 non-text floor where SC 1.4.11 applies.
What is the difference between WCAG AA and AAA contrast?
Most product teams ship AA: ≥4.5:1 for normal text and ≥3:1 for large text. AAA raises normal text to ≥7:1. Large text means roughly 18pt+ regular or 14pt+ bold — 16px body copy is still normal text.
Why you cannot judge WCAG contrast by eye alone
Relative luminance folds RGB into a single brightness model. Red/green pairs that “pop” for some viewers can fail for others. A checker exists so you are not guessing under one monitor and one lighting condition.
Should you pair contrast checks with an HTML accessibility scan?
Contrast is only one accessibility slice. Use HTML Accessibility Check (axe-core) for missing labels, heading skips, and ARIA issues after tokens are fixed.
Does the contrast checker upload your designs?
Hex math runs in your browser. You do not upload Figma exports to SortMyFile for this tool.
Try it now
Open the matching SortMyFile tool — processing stays in your browser.