Check contrast where the text actually sits
Color harmony and text readability answer different questions. Check each foreground against the surface immediately behind it.
Understand the ratio
The tool linearizes sRGB and calculates relative luminance Y = 0.2126R + 0.7152G + 0.0722B. Contrast is (lighter Y + 0.05) / (darker Y + 0.05). It ranges from 1:1 for identical colors to 21:1 for black and white.
Apply the appropriate threshold
Normal-text AA needs at least 4.5:1; large text needs 3:1. Large text is roughly 24 CSS px, or 18.67 CSS px if bold. Decisions use the unrounded ratio. A displayed 4.50 may therefore still fail if its actual value is just below 4.5.
Inspect more than two colors
Transparent overlays, photos, gradients, focus indicators and disabled states need separate checks. The current tool accepts opaque colors. A passing ratio is not a complete WCAG audit; keyboard operation and meaningful labels still matter.