Which contrast ratio do I need to pass WCAG AA?
Normal text requires a 4.5:1 ratio; large text (18pt+ or 14pt bold) requires 3:1. The WCAG Color Contrast checker shows both thresholds and your pass/fail status instantly.
Collection
Design & Color Tools
Check color contrast ratios for WCAG compliance, simulate color blindness, and calculate aspect ratios — free design helpers that run entirely in your browser.
3 tools in this category
← HomeWhy this collection exists
Accessible and well-proportioned visuals start with the right numbers. This collection groups the TeaFun tools that designers, developers, and content creators use to check color accessibility, simulate vision conditions, and lock in correct proportions.
Common use cases
- Check that body text and its background clear the WCAG AA contrast ratio before you ship a design.
- Preview a palette through deuteranopia and protanopia to make sure a status colour is not the only thing carrying meaning.
- Lock an image or video frame to a clean 16:9 or 4:3 ratio before you crop or export.
What This Collection Covers
Three tools for getting the numbers behind a design right: a WCAG contrast checker, a colour-blindness simulator, and an aspect-ratio calculator. The contrast checker takes a foreground and background colour and reports the ratio against the WCAG AA and AAA thresholds, so you know whether text will be readable rather than guessing. The colour-blindness simulator approximates how a palette looks to people with common types of colour vision deficiency. The aspect-ratio calculator keeps proportions correct when you resize or crop. They are small, focused utilities — the kind of check you run near the end of a design, not the canvas you create it on.
How to Use This Collection
Use the contrast checker whenever text sits on a coloured or image background: enter both colours and confirm the ratio meets at least 4.5:1 for normal text, or 3:1 for large or bold text. Run the colour-blindness simulator on anything where colour carries meaning — a chart, a set of status badges, a form error state — and make sure the information survives without the colour, since a meaningful share of users have some form of colour vision deficiency. Reach for the aspect-ratio calculator when you need to resize without distortion: enter one dimension and the target ratio, and it gives you the other.
Why These Checks Matter
Accessibility and proportion are easy to get wrong by eye. A colour pairing that looks fine on your calibrated monitor can fail contrast on a phone in sunlight, and a palette that reads clearly to you may collapse for a colour-blind user if colour is the only cue. The WCAG ratios exist precisely because human judgement of contrast is unreliable. Proportion matters too: a mis-cropped image or a stretched video is the kind of small flaw people notice without being able to name it. None of these tools designs for you — they catch the measurable mistakes a good eye can still miss, so the work holds up beyond your own screen.
Featured tools
Color Palette + WCAG Checker
Check contrast ratios, AA/AAA compliance, generate palette variants, and export CSS or Tailwind v4 color tokens locally.
Color Blindness Test
Test your color vision with Ishihara-style plates optimized for gamers.
Aspect Ratio Calculator
Calculate aspect ratios instantly. Convert dimensions, solve for missing sides, and browse 2025/2026 social media image sizes.
FAQ
How does the color blindness simulator work?
It applies standard daltonisation matrices to the input colors to approximate how they appear with different types of color vision deficiency — all computed locally in your browser.
Should colour ever be the only way I show information?
No. Because some users cannot distinguish certain colours, pair every colour cue with a second signal — a label, an icon, a pattern, or text. The simulator helps you check whether your meaning survives when the colour does not.
Why does aspect ratio matter for images and video?
Cropping or resizing to the wrong ratio either distorts the content or forces letterboxing. Locking to a standard ratio like 16:9 or 1:1 keeps everything in proportion and predictable across the places it will be displayed.