Check the contrast ratio between foreground and background colors against WCAG AA and AAA criteria.
Normal text preview — 16px regular
Large text preview — 19px semibold
Large text preview — 24px
Ratio uses relative luminance per WCAG (sRGB). Large text means ≥24px normal or ≥18.66px bold.
Color contrast measures the difference in brightness between foreground text and its background. The WCAG contrast ratio helps determine whether text is readable for a wider range of people.
Choose foreground and background colors to see a live preview and the ratio between them. The results indicate whether the pair meets WCAG thresholds for normal and large text.
Check text colors for websites, apps, buttons and other interface states before using them in a design.