Black or white text? Call 10 colors by eye, then see where the formula flips.
Each color below is a real button background. Tap the label you find easier to read. Then WCAG's math gives its verdict, and you can see how far apart you two are.
Color 1 of 10#------
Which one reads better here? Trust your eyes.
Your 10 colors by relative luminance (L)
Filled circles: you agreed with WCAG. Hollow: you picked the other label. The vertical line is where the two ratios are equal.
Zoom out: all 148 CSS named colors
Tap a swatch to read its ratios. Sorted by luminance, darkest first. Swatches that fail 4.5 : 1 for normal text are crossed out.
Where exactly does it flip?
White text has contrast 1.05 / (L + 0.05) against a background of luminance L, and black text has (L + 0.05) / 0.05. Set them equal and solve:
Find the flip for any color
Choose a hue and lightness. Then tap a bar to jump to that hue: each bar shows the HSL lightness at which black text starts to win for that hue at your saturation. Short bars mean black takes over early.
Hue
Sat.
Light.
White text
Black text
Flip lightness by hue (bar height = lightness where black starts winning)