WCAG contrast ratios explained
Ratio definition
Contrast ratio compares relative luminance L1/L2 (lighter over darker) with a floor of 1 and ceiling of 21 for pure white on black. WCAG 2.x uses a specific sRGB luminance formula.
Targets
Normal text AA needs at least 4.5:1; large text AA 3:1. AAA is stricter (7:1 normal). UI components have related non-text contrast criteria in WCAG 2.1/2.2.
Worked example
Black (#000) on white (#fff) is 21:1. Medium gray on white may fail AA for small text even if it “looks fine” on a bright monitor.
Limits
Color blindness, ambient light, and display calibration still matter after a pass. Logos and disabled states have exceptions—read the Success Criterion text.
FAQ
Q: Does AA guarantee readability? A: It is a minimum bar, not a design finish line.
Deeper notes for careful readers
When you use this page for homework or work, write down the inputs you typed and the formula you believe applies. Then recompute once by hand or with a second method. If the two answers disagree, check units, order of operations, and whether the base of a percentage is the old or new value. Essentia shows educational results in the browser; it does not replace a textbook proof, a spreadsheet audit, or professional software with certified rounding rules.
Practice checklist
1) State the question in one sentence. 2) Name the formula. 3) Plug in numbers with units. 4) Sanity-check magnitude (too big or too small?). 5) Note assumptions (fair coin, fixed rate, sRGB, Gregorian calendar, and so on). Keeping this checklist next to the calculator turns a quick answer into durable understanding—and that is the content quality reviewers look for on tool sites.
Design beyond the ratio
Passing AA does not guarantee comfortable reading for every user. Font weight, letter spacing, blur, and glare matter. Non-text UI components have their own contrast criteria. Test with real devices and, when possible, people who rely on magnification or high-contrast modes. Essentia computes the WCAG 2 relative-luminance ratio for two hex colors as a starting gate.