Colour Contrast Tool

Enter the hex value of the colour, with or without a # prefix.
Enter the hex value of the colour, with or without a # prefix.

Colour Analysis

Hex 1:

Hex 2:

Contrast Ratio:


Normal Text

WCAG AA:

WCAG AAA:


Large Text

WCAG AA:

WCAG AAA:


User Interface

WCAG AA:


Colour Preview

The quick red fox jumped over the lazy brown dog.
The quick red fox jumped over the lazy brown dog.

Explination Of The Results

The WCAG guidelines defines the following guidelines for accessible web content and associated contrast ratios.


1.4.3 Contrast (Minimum):

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

1.4.6 Contrast (Enhanced):

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Spot a problem with this tool? Fill in the contact form and let us know!