Tool
Contrast checker
WCAG 2.2 contrast ratios for text and interface elements, with a fix suggested when a pair falls short.
Text color
Background
Contrast ratio
1.93:1
Normal text, AA
Body copy under 24px needs at least 4.5:1
Normal text, AAA
Enhanced contrast for body copy needs 7:1
Large text, AA
24px and up, or 19px bold, needs 3:1
Large text, AAA
Enhanced contrast for large text needs 4.5:1
UI components and graphics
Borders, icons, and focus rings need 3:1
Nearest passing text color: #5F70C4
Same hue, darkened until normal text reaches AA (4.5:1).
Preview
Large text at 24px and above needs 3:1.
Normal body text needs 4.5:1 to meet AA, and 7:1 to meet AAA. The ratio is the same whichever color is the text and whichever is the background.
Solid buttonOutline button
Share this check
colorway.app/color-contrast/B1B9E2/FFFFFF