CaliberVisual
Log inStart free
Free tool

Color contrast checker

Two colours in, a contrast ratio out, and a straight answer on whether text in them is readable.

7.08:1

Large text at 24px
And body copy at sixteen, which is the size held to the stricter bar.
  • AA · normal textPassneeds 4.5:1
  • AA · large textPassneeds 3:1
  • AAA · normal textPassneeds 7:1
  • AAA · large textPassneeds 4.5:1

Large means 18pt and up, or 14pt bold — roughly 24px, or 18.66px bold. For captions read on a phone, aim above the minimum rather than at it: the screen is small, often outdoors, and the frame behind the text moves.

What this does

Calculates the WCAG 2.1 contrast ratio between a foreground and a background colour and reports it against the four thresholds that matter: 4.5:1 for normal text at AA, 3:1 for large text at AA, 7:1 for normal text at AAA and 4.5:1 for large text at AAA. Large means 18pt, or 14pt bold. Beyond accessibility compliance, this is the check that decides whether a caption is legible over footage on a phone in daylight, which is where most video text is actually read. Where a pair fails, the tool suggests the nearest passing colour by adjusting lightness, so you keep the hue you chose instead of being told to use black.

How to check colour contrast

  1. 01

    Set the two colours

    Type hex codes, use the pickers, or swap them. Both are shown live as text on a background so you can judge it as well as measure it.

  2. 02

    Read the ratio

    Each of the four WCAG thresholds passes or fails separately. Text at 24px is held to a lower bar than body copy, which is why a caption can pass where a paragraph would not.

  3. 03

    Fix a failure

    The suggestion moves the lightness of one colour just far enough to pass, keeping the hue. Take it, or use it as the direction to move in.

Questions

What contrast ratio do I need?

4.5:1 for normal text and 3:1 for large text to meet WCAG AA, which is the level most regulations reference. AAA asks for 7:1 and 4.5:1. For video captions read on a phone, aim above the minimum rather than at it — the screen is small, often outdoors, and the frame behind the text moves.

What counts as large text?

18pt and up, or 14pt and up if it is bold. In CSS pixels that is roughly 24px, or 18.66px bold. Below that, the 4.5:1 threshold applies.

How do I keep text readable over video?

Contrast against a moving frame is not a fixed number, so give the text its own ground: a solid or semi-transparent plate, a stroke, or a drop shadow. Then check the text against the plate rather than against the footage. That is what every well-made lower third does.

Does contrast apply to logos and icons?

Logos are exempt from WCAG's text rules. Icons and interface components that carry meaning are held to 3:1 against what is next to them. Decoration has no requirement, but if it has to be seen, it has a requirement in practice.

Other free tools