Try your own colors
A separate live sandbox — it won't change the "#3498DB vs Yellow" result below. Use the permanent-page link to get a dedicated page for a different pair.
WCAG pass/fail for #3498DB vs Yellow
| Requirement | Needs | Result |
|---|---|---|
| AA — normal text | 4.5:1 | ✕ Fail |
| AA — large text | 3.0:1 | ✕ Fail |
| AAA — normal text | 7.0:1 | ✕ Fail |
| AAA — large text | 4.5:1 | ✕ Fail |
| UI components & graphics | 3.0:1 | ✕ Fail |
#3498DB against other backgrounds
Formula
WCAG contrast is based on relative luminance — a weighted, gamma-corrected mix of the red, green and blue channels: L = 0.2126·R + 0.7152·G + 0.0722·B (each channel linearized from sRGB first).
The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker — giving a value from 1:1 (identical colors) to 21:1 (pure black on pure white).
Use it in code
Click to copy.
.element {
color: #3498db;
background: #ffff00;
/* contrast ratio: 2.94:1 — fails WCAG AA normal text */
}