WCAG AA Contrast Ratio

That light gray looks great on a studio monitor and vanishes on a phone screen in daylight. The objective ruler for settling the argument is the contrast ratio. Pick two colors in the swatches, one for the text and one for the background, and the page returns something like 4.54:1 followed by the level reached: AAA, AA, AA Large or a fail. It recalculates on every change, with no button in the way.

The math is not the brightness difference your eye perceives: each RGB channel is linearized and weighted (0.2126 red, 0.7152 green, 0.0722 blue), and the ratio is the lighter luminance plus 0.05 divided by the darker one plus 0.05. Green dominates the result, which is why a vivid green like #22c55e on white lands at only 2.28:1 and fails, while a dark blue clears the bar easily. Swapping the two colors changes nothing.

The badge reports only the highest level reached, with no split by font size: 5:1 shows as AA, though on a 24px heading it would already be AAA. Note that the failing badge reads Falha, Portuguese for fail, since the widget is shared with the Portuguese page. It reads solid colors only, so gradients, transparency and background photos are out of scope. Passing contrast also does not fix color blindness on its own.