react tools
Color Contrast Checker
Enter hex colors or use the pickers. We compute the contrast ratio and pass/fail for normal and large text under WCAG.
Created by
Sample heading
Body text at normal size checks WCAG contrast ratio.
Contrast ratio: 14.14 :1
- AA normal text (4.5:1): Pass
- AA large text (3:1): Pass
- AAA normal (7:1): Pass
- AAA large (4.5:1): Pass
More React Tools
🔷JSON to TypeScript Generator
Paste any JSON and instantly get TypeScript interfaces or types. Handles nested objects, arrays, and optional fields.
Open tool →🖼️SVG to React Component
Convert raw SVG markup into a clean React JSX component with proper camelCase props and optional TypeScript support.
Open tool →🎨CSS to Tailwind Converter
Paste plain CSS and get the equivalent Tailwind CSS utility classes. Handles colors, spacing, flex, grid, and more.
Open tool →