GFS Design System — Color Accessibility Checker

01 Contrast Checker WCAG 2.1 contrast ratio calculator with live preview

Foreground (Text)

Background

--

Contrast Ratio

AA

Normal text

--

AA

Large text

--

AAA

Normal text

--

AAA

Large text

--

Live Preview

Heading Text (24px Bold)

Body text at 15px. Global Food Solutions delivers commodity food products across the eastern United States, from our facilities in Edgewood, NY and Hermitage, PA.

Small text at 13px — secondary descriptions, labels, and metadata appear at this size throughout the design system.

MONO 11PX — IBM Plex Mono for data labels, system info, and technical content.

Inverse: background as text on foreground.

■ Calculations use the WCAG 2.1 relative luminance formula with sRGB gamma correction.

02 GFS Color Pairs Pre-loaded brand color combinations with pass/fail status

■ Click any pair to load it into the checker above. AA Normal requires 4.5:1.

03 Full Contrast Matrix Every GFS brand color tested against every other

AAA (7:1+) AA (4.5:1+) AA Large only (3:1+) Fail (<3:1)

■ Click any cell to load that pair into the checker. Diagonal cells are same-color (1:1).

04 WCAG Reference Contrast ratio requirements for WCAG 2.1 compliance

Level	Text Size	Minimum Ratio	Description
AA	Normal (<18pt / <14pt bold)	4.5 : 1	Minimum for body text. Required for WCAG 2.1 Level AA.
AA	Large (18pt+ / 14pt+ bold)	3 : 1	Minimum for headings and large text at AA level.
AAA	Normal (<18pt / <14pt bold)	7 : 1	Enhanced contrast for body text. Highest compliance.
AAA	Large (18pt+ / 14pt+ bold)	4.5 : 1	Enhanced contrast for large text at AAA level.

Relative Luminance Formula

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

where each channel:
  sRGB <= 0.04045 ? sRGB / 12.92 : ((sRGB + 0.055) / 1.055) ^ 2.4

Contrast ratio:
  ratio = (L1 + 0.05) / (L2 + 0.05)  where L1 >= L2

■ WCAG 2.1 Success Criterion 1.4.3 (AA) and 1.4.6 (AAA). Large text is 18pt (24px) or 14pt (18.66px) bold.