How to use
- Enter one text color and one background color.
- Check the ratio, then look at AA / AAA verdicts for normal and large text.
- If the pair fails, go back to Color Picker and try a different color.
Wave 41 cluster expansion
Turn two color values into a readability check
This page is for pass/fail judgment. Use it after you already know the candidate colors.
How to choose between nearby pages
Use Color Picker when you only have one color and still need a practical swatch. Use Color Mixer when two candidate swatches still need a midpoint option. Use Color Converter when the same approved color must be rewritten in another notation. Use Color Scale Generator when one approved color needs a numbered light-to-dark system before checking final pairings. Use Accessible Color Palette when a brand color must become a role-based UI set before you test the final foreground/background pair. Use Gradient Generator when those approved colors must become a background-ready CSS gradient. Use this page last, once the foreground and background pair is already known and you need a pass/fail readability check.
FAQ
What does this page check?
It compares a foreground and background color, then shows the contrast ratio and quick WCAG AA/AAA pass or fail states for normal and large text.
Is this a full accessibility review?
No. It is a quick contrast check only. Real accessibility review still depends on text size, weight, spacing, context, and component state.
How is this different from the color picker?
Use the color picker when you want HEX, RGB, and HSL values. Use this page when you already have two colors and need a readability verdict.
Does the share URL contain anything except colors?
No. The share URL only contains the foreground and background colors.