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 |
|---|
| 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 |
|---|
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 /wiki/spaces/WCAG/pages/163513201.