what is the purpose of using Color Contrast Tool? It's just background and text checking or icon checking?

  • 1
    I'm voting to close this question as off-topic because it's asking about the purpose of a tool.
    – Mayo
    Mar 22, 2017 at 19:54
  • 1
    @Mayo I think this could be treated as a graphic design question or an accessibility question so it would be good to clarify or edit.
    – Michael Lai
    Mar 22, 2017 at 23:48
  • @Raghu, could you specify what tool you're asking about? You might have better luck if you reframe your question as What's the reasoning behind checking contrast and not the purpose of a specific tool (which is almost certainly written on the tool's web page).
    – cloudworks
    Mar 24, 2017 at 7:23

2 Answers 2


I added a couple of new tags to your question - Accessibility and Human Eye, mainly because your question touches on both.

Accessibility is obviously for text against a coloured background, because some people with sight issues will struggle much more to read the text. As other have stated WCAG 2.0 has a specific requirement that covers this. It is covered in Guideline 1.4:

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.

However because you asked about icons, this is not specifically an accessibility issue (accessibility users still might want to see your icon), which is why I added the Human Eye tag.

The human eye is very good at certain thing, and poor at other things (it is why there are many types of optical illusion) and will vary from person to person. This because of the ratio of rods to cones in our eyes varies from person to person. Cones deal with colour and rods deal with grey-scale. The size of the icon also plays a part in the ability of the eye to discern the icon from the background. If the icon is too small and your colour choices are incorrect against the background colour, your eye will struggle to make out the icon.

So if you need your icon to stand out and be understood, choose the colours carefully and make your icon sufficiently sized.


If you're talking about a tool that measures colour contrast against WCAG 2.0 success criteria (like SC 1.4.3), those guidelines were specifically created to ensure contrast between text and its background. That said, you can still choose to apply the same standards to icons in much the same way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.