Contrast checker

Colours in, every WCAG 2.2 contrast check out: text on its background, or a link inside a sentence with the text around it. Write them in whatever your stylesheet speaks: oklch(), lab(), color(display-p3 …), color-mix(), hex, or plain rgb(). Everything is computed in your browser, and the maths is the same pour engine code that audits your pages.

14.6:1

contrast ratio

Normal text, 16px. The quick brown fox jumps over the lazy dog.

Large text, 24px

Large bold, 18.66px

Against WCAG 2.2

    Large text means 24px, or 18.66px bold, and bold starts at weight 600.

    See how to fix

    How to fix it

    The hue and the intensity you picked survive: only lightness moves, or opacity when a translucent colour has no lightness left. Suggestions come back in the notation you typed, just past 4.5:1, the minimum for normal text.

    The same pair, in every syntax
    Seen with different vision

    The same colours through the simulations pour tools ship. Contrast maths does not change here, but whether the colours are still distinguishable does.

      What this can and cannot tell you

      The ratio is WCAG 2.x relative luminance, computed in sRGB exactly as the specification defines it. Anything you type in a wider gamut is measured on its sRGB rendering, because that is the space the formula is defined in. A display-p3 colour outside sRGB will show a small gamut note rather than pretend the number covers it.

      Transparency is composited before measuring, which is what a browser paints. We composite in floating point while a screen composites into 8-bit channels, so a translucent colour can differ from the rendered pixel by up to about 0.03 of a ratio point. That is never enough to change a verdict unless you are already within a rounding error of the threshold, and if you are, treat it as failing.

      The link check follows technique G183: 3:1 between a link and the text around it, and only where colour is the one thing marking the link. An underline, or another cue that does not rely on colour, removes the need. What the link and the text each owe the background, 4.5:1, stays either way.

      A ratio is not an accessibility verdict. It says nothing about whether text is legible at its size and weight, whether it sits on a photograph, or whether the colours stay distinguishable to someone with a colour vision deficiency. For a page rather than a few colours, run the extension and read what it says it cannot prove.

      The same contrast code that runs in pour tools.