contrast.fix

Is your text readable? If not, here's the closest colour that is.

Made by musaabk.devالعربية

Readable for everyone

About one in twelve men has some colour blindness, and most of us read screens in sunlight at some point. Contrast is what keeps this sentence readable for all of them.

Small print is where low contrast hurts most.

    AA is the usual minimum: 4.5 for normal text, 3 for large. AAA is stricter: 7 and 4.5. Large text is 24px, or about 18.5px bold.

    Aim for

    Your palette

    Every colour as text on every other. Tap a cell to load it above.

    Questions

    What contrast ratio do I need?

    WCAG 2.2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1.

    What counts as large text?

    At least 18 point, or 14 point bold. In CSS pixels that's about 24px, or about 18.5px bold.

    How does Fix keep my colour?

    It works in OKLCH, a colour space built to match how bright colours look. It keeps the hue and how vivid the colour is, changes only the lightness, tries lighter and darker, and picks the one that needs the smaller change. An orange stays orange instead of turning muddy brown.

    Why does 4.499 show as 4.49 and fail?

    WCAG says the ratio must not be rounded: 4.499:1 does not meet 4.5:1. So the number is rounded down, and the tool never shows a pass that isn't one.

    Can I check a whole palette?

    Yes. Paste up to 8 colours in hex, rgb() or hsl(), and the table shows every colour as text on every other, with its ratio and level. Tap a cell to load that pair above.

    Why are see-through colours refused?

    A colour with transparency, like rgba(0,0,0,0.5), looks different on every background, so one ratio would be wrong. Use the solid colour you actually see.

    Do you track the colours I check?

    No. Contrast is worked out inside this browser tab, and none of your colours are sent anywhere.