A contrast checker should be easy to validate because several color pairs have well-known outcomes. Z Tools uses the standard sRGB relative-luminance calculation and ships an offline known-pair suite so the UI’s math can be checked independently.
Known pairs from the bundled verification
| Foreground | Background | Ratio | Z Tools grade label |
|---|---|---|---|
| #000000 | #FFFFFF | 21.0000:1 | AAA |
| #777777 | #FFFFFF | 4.4781:1 | AA Large |
| #1F2937 | #FFFFFF | 14.6791:1 | AAA |
| #FF5733 | #FFFFFF | 3.1517:1 | AA Large |
| #0B57D0 | #FFFFFF | 6.3862:1 | AA |
How the ratio is calculated
Each sRGB channel is normalized to 0–1 and linearized; relative luminance is then a weighted sum of red, green, and blue. Contrast is (Llighter + 0.05) / (Ldarker + 0.05), which ranges from 1:1 for identical luminance to 21:1 for black/white.
Thresholds need text context
WCAG 2.x contrast guidance commonly uses 4.5:1 for ordinary text at AA, 3:1 for large text at AA, 7:1 for ordinary text at AAA, and 4.5:1 for large text at AAA. The checker labels the numeric threshold; it cannot infer whether your CSS actually qualifies as “large text,” whether the text is essential, or whether other exceptions apply.
Contrast is not a complete accessibility audit
A passing ratio does not guarantee usable typography, focus indicators, zoom/reflow, semantic structure, motion safety, or distinguishability for every form of color vision deficiency. Use the ratio as one objective test in a wider review.
Why arbitrary foreground/background input matters
The older tool only showed contrast against black and white. The current version keeps those quick references but also lets you select any foreground/background pair and immediately reports the ratio plus normal/large-text threshold status. Everything runs locally.
Primary reference
For normative requirements and exceptions, consult the relevant W3C WCAG understanding document used by your target conformance level.