DEVELOPER UTILITIES / LOCAL TOOL
Color Contrast
Check WCAG contrast with live preview.
HOW IT WORKS
Relative luminance into a ratio
sRGB colors are linearized and compared using the WCAG contrast-ratio formula.
Limits to keep in mind
Passing contrast does not guarantee readable typography, clear focus states or good color-vision accessibility.
A PRACTICAL WORKFLOW
Use the result carefully.
01Compare foreground and background colors against WCAG contrast guidance.
02Run the utility and inspect the complete output.
03Check normal and large text thresholds, then test the actual interface at real sizes.
COMMON QUESTION
What counts as large text?
WCAG generally uses at least 18pt regular or 14pt bold as the large-text threshold.