Colour Contrast Checker
Make your colours work together.
See which text and background combinations meet accessibility standards, then find small changes that make the others easier to read.
One colour per line, or paste CSS variables. Supports HEX, RGB(A) and HSL(A).
Leave empty to compare every colour against itself. Colours can have names, e.g. --brand: #3D358B;
Check, refine and export
Select a failing combination to see accessible alternatives for either colour. Select a colour code to copy it.
Your contrast matrix
How to read this Rows are background colours; columns are text colours. Select a failed pairing to see suggested fixes. The matrix scrolls sideways on smaller screens.
Calculated with the WCAG 2.x contrast formula. Displayed ratios are rounded down to one decimal place; pass/fail uses full precision. Transparent colours are composited over white, so check transparency against your actual page background.