ColorPairLabCompare every color pair
Each row is a text color and each column is a background. Their intersection shows the contrast ratio. Select a cell to see its four AA and AAA text results or open the pair in the checker.
Read the matrix
- Create or load a palette with two to eight opaque colors.
- Find the row for the text color and the column for its background.
- Select their intersection to read the ratio and all four text results. Mirrored cells reverse the roles but keep the same ratio.
- Review the combinations used in your design. On a small screen, scroll inside the matrix to reach the remaining columns.
Why the diagonal is 1:1
A color has no contrast with itself, so every diagonal cell is 1:1. This is expected. You only need suitable contrast for the text and background combinations used in your design.
Match the result to the text
A 16 px regular button label counts as normal text, even inside a tall button. A 24 px regular heading qualifies as large text. Record the size and weight with the pair so you know which result applies.
Recheck edited colors
Editing one swatch changes every cell in its row and column. Revisit the labels, links and backgrounds that use it before exporting. Text contrast is one part of that review; focus indicators and component boundaries need separate checks.