Color Accessibility

Accessibility is always a top priority. In accordance to this standard, we comply with WCAG 2.1 (Level AA) contrast guidelines in order to account for the needs of all people.

Contrast Charts

Use these charts to discern contrast accessibility between two colors.

The contrast outcomes between two colors can have three possibilities:

A gray box indicating failed contrast
Do Not Use - Fails to meet contrast requirements. Do not combine these colors.
A green box with a checkmark indicating successful contrast

Successful Contrast - Indicates a 4.5:1 contrast ratio, and meets requirements for all text and graphical elements.

If text is smaller than 18px (or 14px bold) it must have 4.5:1 contrast ratio.

A pink error box warning to be be mindful of meeting contrast conditions.

Needs Consideration - Indicates a 3:1 contrast ratio, and should only be used for large text and graphical elements

At least 18px (or 14px bold) is considered large text.

Each chart image clicks through to view a high resolution version.

A chart of colors comparing contrast accessibility.A chart of colors comparing contrast accessibility.

Each chart image clicks through to view a high resolution version.

Previous: Color Codes