Color + Font Size Accessibility Checker
Get a definitive WCAG pass/fail result for your exact font settings. Enter foreground and background colours, then set your font size and weight - the tool automatically applies the correct WCAG threshold (large text ≥18pt / ≥14pt bold needs 3:1, normal text needs 4.5:1). Live preview shows exactly how your text will look. Fully private, 100% free, and no signup required.
Color Presets
#000000 · rgb(0, 0, 0)
#FFFFFF · rgb(255, 255, 255)
Font Settings
Quick Font Presets
Live Preview
The quick brown fox jumps over the lazy dog. Accessibility matters for everyone.
16px / weight 400 - Normal text (WCAG)
21.00:1
Excellent contrast · Passes WCAG AAA (normal text requires 7:1). Excellent contrast.
WCAG normal text threshold applies. Suggested text color for this background: #ffffff
Why Use Our Color + Font Size Accessibility Checker?
Font Size & Weight Aware
Unlike basic contrast checkers, this tool factors in your exact font size and weight to determine the correct WCAG threshold. Large text (≥18pt or ≥14pt bold) only needs 3:1 for AA, while normal text needs 4.5:1 - the tool handles this automatically.
Instant WCAG Pass/Fail Results
See the definitive pass/fail result for WCAG AA and AAA on every input change. The contrast gauge visualises where your ratio falls relative to WCAG thresholds, and the live text preview shows exactly how your text will look at the specified size and weight.
100% Private - No Upload
All contrast calculations run locally in your browser using the official WCAG 2.1 relative luminance formula. Your colour values and text settings never leave your device.
Free & No Limits
Check unlimited colour combinations and font settings with no signup, no subscription, and no usage caps. The font size accessibility checker is completely free forever with no ads blocking the interface.
Common Use Cases for Color + Font Size Accessibility Checker
Frontend Development
Frontend developers use the font size accessibility checker to verify that text colour combinations pass WCAG AA at the exact font sizes and weights specified in design mockups. Simply enter the CSS font-size and font-weight values from your code to get an instant pass/fail result.
Typography-Focused Design
Designers creating typographic systems use this tool to validate that body text, headings, captions, and button labels all meet WCAG contrast requirements at their specific sizes. The large text threshold (≥18pt regular / ≥14pt bold) means headings often have looser contrast requirements than body copy.
Mobile & Responsive Design
Mobile designers use the font size accessibility checker to ensure that text remains readable at smaller screen sizes where font sizes may be reduced. Test how your colour combinations perform at the actual font sizes used in your responsive breakpoints.
Document & Presentation Design
Content creators designing presentations, PDFs, or infographics use this tool to check that slide titles, body text, and chart labels meet WCAG contrast at their actual rendered sizes. Large presentation text often passes AA with lower contrast ratios.
Accessibility Audits & QA
Accessibility auditors use the font size accessibility checker as a precise tool during WCAG audits. Instead of assuming all text needs 4.5:1, auditors can enter the actual font size and weight from the page to get the correct required ratio per WCAG 2.1.
E-commerce Product Pages
E-commerce teams use this tool to verify that product prices, descriptions, and add-to-cart buttons meet WCAG AA at their displayed font sizes. Small print like disclaimers and captions needs the highest contrast (4.5:1 for AA).
Understanding Color + Font Size Accessibility
What is the Color + Font Size Accessibility Checker?
The Color + Font Size Accessibility Checker is a combined WCAG contrast evaluation tool that factors in not just the foreground and background colours, but also the font size and font weight of your text. WCAG 2.1 defines different contrast requirements for normal text vs. large text - large text (≥18pt regular or ≥14pt bold) only needs a 3:1 ratio for AA compliance, while normal text needs 4.5:1. This tool automatically determines which threshold applies based on your exact font settings, giving you a precise, definitive pass/fail result for your specific use case.
How Our Font Size Accessibility Checker Works
- Enter your colours: Type or paste HEX or RGB values for the foreground (text) and background colours. You can also use the native colour picker or select from the preset colour combinations to get started quickly.
- Set font size and weight: Adjust the font size slider (8-72px) and select a font weight from the chip buttons. Use the quick font presets for common text sizes like body text (16px), headings (28px), or captions (11px).
- Get definitive results: The tool calculates the WCAG contrast ratio and automatically applies the correct threshold based on your font settings. The live preview shows exactly how your text will look, and the pass/fail badges give you clear AA and AAA compliance status.
WCAG Large Text vs Normal Text
- Normal text (<18pt regular / <14pt bold): Requires a minimum contrast ratio of 4.5:1 for WCAG AA and 7:1 for WCAG AAA. Body copy, labels, captions, and most UI text falls into this category.
- Large text (≥18pt / 24px regular or ≥14pt / 18.67px bold): Requires a minimum contrast ratio of 3:1 for WCAG AA and 4.5:1 for WCAG AAA. Headings, large callouts, and display typography typically qualify as large text.
- Why the difference? Larger text has thicker strokes and more surface area, making it easier to read even at lower contrast ratios. WCAG accounts for this by setting lower thresholds for large text.
Important Limitations
The font size accessibility checker evaluates contrast ratios against WCAG 2.1 mathematical thresholds. Passing the contrast ratio check does not guarantee full accessibility - WCAG compliance also requires correct semantic HTML, keyboard navigation, screen reader compatibility, focus management, and other non-colour factors. Additionally, the WCAG contrast formula does not account for all types of colour vision deficiency. Full accessibility validation requires manual testing with assistive technologies and expert accessibility review. Always test your designs with real users and assistive technologies as part of your accessibility workflow.
Related Accessibility Tools
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components. Live preview with HEX and RGB input.
Text on Background Checker
Test how readable text is on any background colour. Adjust font weight and size. Shows pass/fail for AA/AAA with visual preview.
WCAG Compliance Report
Enter a full colour palette and get a complete WCAG compliance report. Shows which colour combinations pass or fail for normal text, large text, and UI components.
Color Palette Generator
Generate 5-color palettes from a base colour using harmony rules. Lock individual colours, regenerate unlocked ones, and export as CSS, SCSS, or Tailwind.
Frequently Asked Questions About Color + Font Size Accessibility Checker
A color + font size accessibility checker combines WCAG contrast ratio calculation with font size and weight evaluation. Instead of assuming all text needs 4.5:1, it factors in whether your text qualifies as "large text" (≥18pt regular or ≥14pt bold) per WCAG 2.1, which only needs 3:1 for AA. This gives you a precise pass/fail result for your exact text styling.
WCAG 2.1 defines large text as at least 18 point (24px) in regular weight, or at least 14 point (approximately 18.67px) in bold weight. The font size accessibility checker automatically applies this threshold based on your font size and weight inputs - no need to manually look up the rules.
Larger text has thicker strokes and occupies more visual area, making it easier to read even at lower contrast ratios. WCAG accounts for this by setting lower thresholds - 3:1 for large text AA instead of 4.5:1. This is why headings can sometimes pass AA with colours that would fail for body text.
The tool calculates this automatically. Normal text (below the large text threshold) needs 4.5:1 for AA and 7:1 for AAA. Large text (at or above the threshold) needs 3:1 for AA and 4.5:1 for AAA. Simply enter your font size and weight and the tool shows the correct required ratio.
Absolutely. All contrast calculations run 100% client-side in your browser using the official WCAG 2.1 relative luminance formula. No colour data, font settings, or any other information is ever sent to any server.
Yes. It is 100% free with no signup required, no premium features, and no usage limits. Check unlimited colour and font combinations without any restrictions.
The tool supports HEX colors (#RGB, #RRGGBB, #RRGGBBAA) and RGB/RGBA values (rgb(r,g,b) and rgba(r,g,b,a)). You can also use the native color picker to visually select any colour. The tool displays both the HEX and RGB equivalents of your selected colour.
No. Passing the contrast ratio check is one important requirement of WCAG compliance, but full accessibility also requires correct semantic HTML, keyboard navigation, screen reader compatibility, focus management, adequate colour beyond contrast (e.g., not relying on colour alone to convey information), and many other factors. The accessibility checker is a useful first-pass tool, but full WCAG validation requires manual testing with assistive technologies.