2026-05-17 · 6 min read

WCAG Color Contrast for Government Websites: Requirements, Testing, and the Most Common Failures

# WCAG Color Contrast for Government Websites: Requirements, Testing, and the Most Common Failures

Color contrast is the most frequently detected WCAG failure on the web. The WebAIM Million 2024 report found low contrast text on 81% of home pages tested — making it not just common but nearly universal as a failure category.

Government websites are not exempt from this pattern. Many government brand systems were developed before WCAG was a legal requirement, and the official colors — muted blues, light grays, warm golds — often fail the contrast thresholds WCAG 2.1 requires.

This post explains the contrast ratios, what content they apply to, the exceptions, how to test, and the most common failure patterns on government sites.

The Two Contrast Criteria in WCAG 2.1

WCAG 1.4.3 — Contrast (Minimum) (Level AA)

Text must meet minimum contrast ratios against its background:

• 4.5:1 for normal-weight text under 18pt (or under 14pt bold)
• 3:1 for large text — defined as 18pt or larger, or 14pt bold or larger

These ratios apply to rendered text: the contrast between the foreground text color and the background color as they actually appear on screen, including any overlays, gradients, or opacity effects.

The ratio scale:

• 1:1 = no contrast (identical colors)
• 21:1 = maximum contrast (black on white or white on black)
• 4.5:1 = the Level AA minimum for normal text — roughly what you get with dark gray (#595959) on white

WCAG 1.4.11 — Non-text Contrast (Level AA, WCAG 2.1 new)

User interface components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors.

This criterion — new in WCAG 2.1 — covers:

• Form input borders against the page background (the border that shows where a text field is)
• Focus indicators against adjacent colors
• Buttons and their active states
• Icons that convey meaning (not decorative icons)
• Chart lines and data points in graphs
• Map boundary lines

Government sites that updated to WCAG 2.0 but haven't revisited for WCAG 2.1 commonly miss this criterion. Form input borders on white backgrounds — often light gray (#ccc or #ddd) — frequently fail the 3:1 threshold.

What Is Exempt from Contrast Requirements

WCAG 1.4.3 specifically excludes:

• Inactive UI components — disabled buttons, grayed-out form fields. These have no contrast requirement because they are intentionally unavailable.
• Pure decoration — text that conveys no information (watermarks that repeat a logo, background text patterns)
• Logotypes — text within logos or brand marks has no contrast requirement. The agency seal or logo is exempt.
• Text in images with significant other visual content — a photograph with text overlaid where the text isn't the primary communication is typically exempt.

These exemptions are narrower than they appear. "Decorative" must be genuinely non-communicative. Placeholder text in form fields, for example, communicates the expected input format and must meet contrast requirements.

The Most Common Contrast Failures on Government Sites

Gray body text. A very common pattern: the main content color set to a medium gray like #777, #888, or #999 on white. These values fail 4.5:1 — #777 provides only 4.48:1 (barely below threshold), #888 provides 3.54:1, and #999 provides 2.85:1. Body text in these colors fails for the majority of users reading normal-size text.

Gray subheadings. Subheadings styled lighter than body text — a common typographic choice — often land in the 3.0-4.4:1 range. Whether they pass depends on size. At 18pt or 14pt bold, 3:1 is sufficient. Smaller subheadings styled in #888 or #999 fail.

Placeholder text. Input placeholder text (the hint text inside a form field before a user types) is almost universally styled at low contrast. The default browser placeholder color is around #757575 — which passes 4.5:1 only barely. Many custom design systems style placeholders in #aaa, #bbb, or #ccc — which fail significantly.

Color-on-color buttons. A button with a lighter brand color as background and white or light text frequently fails. A #5a9fd4 blue background with white text provides approximately 3.3:1 — which passes for large text (18pt+) but fails for the normal-sized button labels.

Link text. Links that are indicated only by color (no underline) must have sufficient contrast against both the surrounding body text and the page background. This is a two-ratio check: link color vs. background AND link color vs. body text.

Non-text UI failures (WCAG 1.4.11). Form input borders at #ccc on white: approximately 1.6:1 — fails. Focus indicators styled as thin 1px dotted outlines in a light color: often fail. Checkbox and radio button borders: commonly fail.

How to Test for Contrast Failures

Browser tools:

• Chrome DevTools Accessibility panel: Shows the contrast ratio of any selected text element and flags failures inline in the Styles panel.
• Firefox Accessibility Inspector: Similar contrast checking for selected elements.
• axe DevTools browser extension: Automated scan detects most 1.4.3 failures. Does not detect all 1.4.11 non-text contrast failures.

Standalone tools:

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker/): Enter foreground and background hex values for an instant ratio and pass/fail.
• Colour Contrast Analyser (TPGi, free desktop app): Use the color picker directly on screen to sample actual rendered colors including anti-aliasing, gradients, and opacity.

Important: Always test rendered colors, not design system color values. Opacity, background images, and CSS blending modes affect the actual contrast on screen. A color that passes in the design spec may fail when overlaid on a background image.

Fixing Contrast Failures

For gray body text: Darken to #595959 or darker (4.5:1 vs white). The perceptual difference between #777 and #595959 is small — both read as "gray body text" — but the contrast difference is legally significant.

For gray placeholder text: Set placeholder color to a minimum of #767676 (exactly 4.5:1 against white). Many frameworks set this far lighter by default.

For light form input borders: Darken the border to a minimum of #767676 against white to meet the 3:1 non-text contrast threshold. Or increase border width so the visual cue is more than just color.

For color-on-color buttons: Audit each button color combination independently. If the primary CTA button fails, either darken the background color, change the text to a darker color, or increase the font size to move it into the "large text" category where 3:1 is sufficient.

Systematic vs. One-Off Contrast Fixes

Contrast is rarely one failure on one element. Government sites typically have systematic failures: the entire typographic scale is too light, or the entire form system uses under-contrast input borders. Fixing contrast at the design token or CSS variable level — changing the value of --color-text-body from #777 to #595959 — remediates hundreds of instances simultaneously.

This is why contrast remediation is often among the fastest fixes by ratio of impact to developer time, once the systematic pattern is identified.

The Parallax WCAG audit from Morton Technology Consulting includes a complete contrast analysis covering both 1.4.3 and 1.4.11, identifying which contrast failures are systematic (design token level) versus page-specific, and providing the specific hex value corrections for your color palette. Fixing systematic contrast failures is typically one sprint once the root cause is identified.

The WCAG Pre-Audit Readiness Kit ($149) includes a contrast testing checklist covering both text and non-text contrast criteria, a template for documenting the contrast ratios across your design system's color palette, and the specific calculation methodology for checking link-color contrast.

---

*Morton Technology Consulting LLC, Tallahassee, FL. WCAG 2.1 color contrast audits for Florida government websites. [email protected]*

Morton Technology Consulting LLC — WCAG 2.1 AA audits for Florida government agencies. Parallax audit → · WCAG Readiness Kit → · All posts →