Text on Background Checker

Text on background contrast measures the difference in perceived brightness between text and its background. The WCAG (Web Content Accessibility Guidelines) defines a contrast ratio formula that quantifies this difference on a scale from 1:1 (no contrast, e.g. black text on black background) to 21:1 (maximum contrast, e.g. black text on white background). The minimum acceptable ratio depends on the text size and whether the text is bold - our text on background checker evaluates all these factors automatically.

1. Enter your colours: Type or pick a foreground (text) colour and a background colour using the colour inputs or colour picker. All processing runs locally in your browser - your colours never leave your device. Use the preset buttons for common colour pairs or the swap button to exchange foreground and background.
2. Select text size & weight: Choose from WCAG-standard text scales - Small Text (normal), Large Text, Small Bold, or Large Bold - or switch to Custom mode for precise font size (12px-48px) and weight (400-700) control. The checker automatically uses the correct WCAG threshold values based on your selection.
3. Read the results: The contrast ratio displays prominently at the top with a colour-coded quality indicator (excellent, good, moderate, or poor). Pass/fail badges for WCAG AA and AAA show whether your text meets accessibility requirements. The live text preview lets you see exactly how your text looks at the selected size and weight.

• Small Text (Normal): Body text, labels, and captions below 18pt (24px) regular weight, or below 14pt (18.67px) bold. Requires a contrast ratio of 4.5:1 for AA compliance and 7:1 for AAA compliance. This is the most common text category on the web.
• Large Text: Text at least 18pt (24px) regular weight, or at least 14pt (18.67px) bold weight. Headings typically qualify as large text. Requires a contrast ratio of 3:1 for AA compliance and 4.5:1 for AAA compliance. Large text has lower requirements because it is easier to read.
• Custom Sizes: The checker uses the WCAG definition to determine which threshold applies. If your custom font size and weight combination meets the large text definition (24px regular or 18.67px bold), the more lenient large text thresholds are used automatically.

Start with high contrast: Black text on white background (21:1) is the most readable combination. While brand colours are important, always test them against your backgrounds. A common mistake is using light gray text on white backgrounds - even medium gray (#767676) on white only achieves a 4.0:1 ratio, which fails the 4.5:1 AA requirement for normal text.

Consider text size when choosing colours:You can use lower contrast ratios for large headings (3:1 AA minimum) while maintaining higher contrast for body text (4.5:1 AA minimum). This allows more design flexibility for display text while keeping the main content accessible. Always provide suggested text colours with the checker’s black/white recommendation when a background colour is too light or dark.

Test with real content: Use the editable text preview to test with your actual copy. The checker lets you type any text and see it rendered at the selected size and weight, giving you a true representation of how your content will look to users.