Example input
#000000 #ffffffThe browser workflow processes #000000 #ffffff locally and produces a result you can inspect before export.
Color Contrast Ratio Checker
liveCheck the contrast ratio between foreground and background colors. TypeKitty's color contrast ratio checker runs locally in your browser, so you can see WCAG AA and AAA results for normal and large text.
Colourcolour
The quick TypeKitty preview.
Use this contrast pair for UI text, buttons, labels, and code.
Ratio
21:1
AA normalPASS
AA largePASS
AAA normalPASS
AAA largePASS
How to use Color Contrast Ratio Checker
Validate text colour combinations before shipping UI. Check the result before copying or downloading it.
Add your color value
01Enter or choose the color value you want to process with this browser tool.
Adjust the options
02Review the available settings and choose the output that fits your task.
Copy or download
03Inspect the result, then copy or download it without creating an account.
Practical examples
Start with a real input, then adapt it to your task.
Example input
#ffcc02 #0058a3The browser workflow processes #ffcc02 #0058a3 locally and produces a result you can inspect before export.
Example input
wcag contrast checkerThe browser workflow processes wcag contrast checker locally and produces a result you can inspect before export.
How this browser tool works
TypeKitty processes the data you enter in this browser tab. It is not sent to a TypeKitty tool API.
No account required
colour workflow
Preview before download
Current limitation
Results depend on valid input and the options supported by the browser.
Related tools
All toolsFrequently asked questions
Continue working
Return to this workbench or open a related TypeKitty tool.