WCAG results for #1877f2 on #f5f5f5
| Check | Requires | Result |
|---|---|---|
| Normal text — AA | 4.5:1 | ✗ Fail |
| Large text — AA | 3:1 | ✓ Pass |
| Normal text — AAA | 7:1 | ✗ Fail |
| Large text — AAA | 4.5:1 | ✗ Fail |
| UI & graphics (non-text) | 3:1 | ✓ Pass |
At 3.88:1, Facebook Blue (#1877f2) on Light Gray (#f5f5f5) falls short of the 4.5:1 needed for normal text, but clears the 3:1 bar for large text (≥24px, or ≥18.66px bold). Use it only for headings or large UI text.
How to fix it
The nearest accessible alternatives that pass AA for normal text:
-
Darken/adjust the text to
#0d6ae4(keeps the #f5f5f5 background) — check it. -
Or adjust the background to
#0d0d0d(keeps the #1877f2 text) — check it.
Open this pair in the contrast checker →
Related color pairs
How contrast ratio is measured
The ratio compares the relative luminance of the text and background, on a scale from 1:1 (no contrast) to 21:1 (black on white). WCAG 1.4.3 requires 4.5:1 for normal text and 3:1 for large text; the stricter AAA level wants 7:1 and 4.5:1. Low contrast is the single most common WCAG failure and a frequent trigger in ADA website lawsuits — but it's also one of the easiest to fix.