What is 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.

Contrast ratio

Contrast ratio refers to how bright or dark colors appear on screens.

WCAG 2.0 guidelines dictate a minimum contrast ratio of 4.5:1 that is equivalents to AA level.

We found three defined levels for the visual presentation of both text and images embedded as text: A (minimum), AA (medium) and AAA (high). Level AA is considered “standard”.

The 4.5:1 contrast ratio is intended to address the loss of contrast that users experience if they have low visual acuity, age-related loss of contrast sensitivity, or color deficiencies.

Normalize sized text

• AA: Greater than 4.5.
• AAA: Greater than 7.

Bold text or text larger than 24px

• AA Large: Greater than 3.
• AAA Large: Greater than 4.5.

Libraries

• colorable – Color combination contrast tester.
• hello-color – Functional color palette generator.
• randoma11y – Vote on random a11y color combinations.

Apps

• contrast – A macOS app for quick access to WCAG color contrast ratios.
• contraste – Simple & free app for checking the accessibility of text.