Color Contrast

Contrast

Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable.

In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view.

Requirements

We want to make sure that the colors we use are distinguishable when perceived in the same space.

An example of this is the color of text on top of a background color.

	Contrast Ratio	Level	Text Color	Background Color	Example

	Contrast Ratio	Level	Text Color	Background Color	Example
1	9.27	AAA	`#172842`	`#ffc401`	example
2	5.34	AA	`#0847a6`	`#ffc401`	example
3	3.68	AALG	`#6454c0`	`#ffc401`	example
4	1.65	FAIL	`#97a0af`	`#ffc401`	example

As you can see above in the, example column of the above table, rows three and four are more difficult to read than rows one and two.

According to the W3C WCAG 2.0:

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.

Rating	Success Criterion	Notes

Rating	Success Criterion	Notes
AAA	Pass, (7+ contrast ratio)
AA	Pass, (4.5+ contrast ratio)
AALG	Pass, Large Text Only, (3+ contrast ratio)	with at least 18 point or 14 point bold or font size

More information can be found here https://asce-dev.atlassian.net/wiki/spaces/WCAG/pages/163513201.