4.54:1
Check any two colors against WCAG AA and AAA.
Small tools for UI and visual designers
Each one does a single thing, exactly right. No sign-up, and nothing leaves your browser.
Tools
AaAaAa
Ratio-based type hierarchy.
Steps from one color.
A named 10-step palette from one color.
Latest writing
Contrast is a ratio, not a feeling
A color pair can look fine on your screen and fail in real use. WCAG gives you a number. Here is what 4.5:1 and 7:1 mean, what "large text" really is, and which pairs to check first.
Read morePick a ratio, then stop inventing sizes
A type hierarchy is not a list of sizes you liked in a mock. It is a base size and a ratio. Use those until the page has enough steps — and no extra ones.
Read moreTints and shades are steps, not a brand
Mixing a color toward white or black is a small, useful move in UI. Teams skip it, then invent a new hex for every hover state.
Read more