Check contrast with the actual foreground and background.
Understand WCAG 2.2 AA and AAA ratios, large text thresholds, and the limits of an automatic color adjustment.
What the number measures
The contrast checker linearizes the red, green and blue channels of opaque sRGB colors, calculates relative luminance, and compares the lighter value to the darker one. The ratio ranges from 1:1 for identical colors to 21:1 for black and white. Hue alone is not enough: two very different-looking hues can still have similar luminance.
PaletteTidy shows a ratio rounded to two decimals for readability. Pass and fail decisions use the full precision value. A displayed number that rounds to 4.50 can still fall just below 4.5 and fail; rounding is never used to make a pair pass.
Choose the right threshold
WCAG 2.2 AA requires at least 4.5:1 for ordinary text and at least 3:1 for large text. AAA requires 7:1 for ordinary text and 4.5:1 for large text. Large text means at least 18 points (24 CSS pixels) in regular weight, or 14 points (about 18.67 CSS pixels) in bold. Visual size and font quality can still affect readability.
Enter the foreground and background as three- or six-digit HEX. Swap lets you reverse the pair; the ratio stays the same, but seeing the layout reversed can reveal practical readability problems. The preview includes several font sizes so you can judge the result in context.
Use automatic adjustment as a suggestion
Adjust text to AA searches lighter and darker variants of the foreground while preserving its HSL hue and saturation. It chooses a passing candidate close to the starting HSL lightness. It is not a guarantee of the smallest perceptual difference, brand approval or full accessibility.
The background stays fixed. If the foreground already passes AA, the tool leaves it alone. When choosing an alternative manually, test the final rendered colors rather than relying on the apparent brightness of your monitor.
What a two-color test cannot cover
The checker intentionally accepts opaque colors. Transparent text must first be composited against the actual background. A gradient or image behind text contains many backgrounds, so test the least favorable region beneath the text, or add a stable opaque surface.
Check focus indicators, hover states, selected items and disabled controls in context. Some non-text UI elements have a separate 3:1 requirement under WCAG 1.4.11; this text checker is not a complete audit of that requirement. Convey errors and status using words or shapes as well as color. Keyboard access, screen reader semantics and understandable labels matter too.
Keep an audit trail in your design file
Record the foreground, background, intended font size and weight, and the full-purpose label of each pair. Test the implemented page after styles are applied, because opacity, overlays and component variants can change the final appearance.
The authoritative reference is W3C’s Understanding Success Criterion 1.4.3. PaletteTidy supplies a calculation and a workflow, not an accessibility certification.