Refract

Colour contrast checker and palette generator

Check any colour pair against WCAG 2.2, get the closest colour that passes, then turn a single brand colour into a full, accessible palette you can export as CSS or Tailwind.

Free · no sign-up · copy and paste

Contrast checker

Large text: 24px heading

Normal body text at 16px. Refract checks this pair against the WCAG 2.2 contrast requirements for text, icons and interface elements.

Small print at 14px is where low contrast causes the most trouble.

Colours

–

    Palette generator

    Add harmony colours

    Click any swatch to copy its hex code. Each swatch shows whether white or black text passes on it.

    Palette
    

    

    



    

    

    How to use the contrast checker & palette generator
    

    1. Enter your text and background colours. Use the colour pickers or paste hex codes. The preview shows headings, body text, small print, a button and an icon in your colours.
    2. Read the results. The ratio is checked against every WCAG 2.2 contrast rule: AA and AAA for normal and large text, plus the 3:1 rule for icons and interface elements.
    3. Fix a failing pair. If text fails, Refract suggests the closest colour with the same hue that passes AA or AAA. One click applies it.
    4. Build a palette. Pick a base colour to generate an 11-step scale from 50 to 950, add harmony colours if you like, and copy it as CSS variables, Tailwind config or JSON.
    

    What the WCAG contrast rules require
    WCAG 2.2 level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, meaning 24px and up, or about 18.66px and up when bold. Level AAA raises those to 7:1 and 4.5:1. Separately, success criterion 1.4.11 asks for 3:1 between interface components, such as input borders, icons and focus indicators, and whatever is next to them.
    How the ratio is calculated
    Each colour is converted to its relative luminance, a measure of perceived brightness. The ratio is (lighter + 0.05) ÷ (darker + 0.05), giving a value from 1:1 (no contrast) to 21:1 (black on white). Refract never rounds a result up, so a pair at 4.49:1 is correctly reported as a fail.
    Why the palette uses OKLCH
    Palettes generated by mixing a colour with white and black often look uneven: some steps jump, and blues turn purple as they lighten. Refract builds each scale in OKLCH, a colour space designed around human perception, so the steps look evenly spaced and the hue stays put. Each swatch also tells you whether white or black text passes on it, which makes it quicker to choose button and badge colours.
    

    Frequently asked questions
    

    What contrast ratio do I need for accessibility?
    For WCAG 2.2 AA, which most accessibility laws and policies point to, you need 4.5:1 for normal text, 3:1 for large text and 3:1 for icons and interface elements.
    Does this support WCAG 3 and APCA?
    Not yet. WCAG 3 and its APCA contrast method are still drafts, and WCAG 2.2 is the standard referenced in law and procurement today. Refract checks against WCAG 2.2.
    Is the colour contrast checker free?
    Yes. It's free with no account, and everything runs in your browser.
    How do I use the palette in Tailwind?
    Choose the Tailwind export, then paste the colours object into the theme.extend.colors section of your Tailwind config. Classes such as bg-brand-500 and text-brand-900 will then be available.