Verificateur de contraste
Verifiez les ratios de contraste WCAG entre deux couleurs. Conformite AA et AAA en temps reel.
17.06:1
Normal text
AAA
Large text
AAA
Heading Preview
This is how your text looks on this background. The quick brown fox jumps over the lazy dog.
Smaller body text is harder to read with low contrast. WCAG requires higher ratios for normal-sized text than for large text (18px+ bold or 24px+).
ButtonOutline
WCAG AA
Normal text: 4.5:1
Large text: 3:1
UI components: 3:1
WCAG AAA
Normal text: 7:1
Large text: 4.5:1
Large text
Bold: 18px+
Regular: 24px+
CSS
color: #f8fafc;
background-color: #0f172a;
/* Contrast ratio: 17.06:1 */
/* WCAG Normal text: AAA */
/* WCAG Large text: AAA */Tailwind CSS
<div class="bg-[#0f172a] text-[#f8fafc]">
<!-- Contrast: 17.06:1 (AAA normal / AAA large) -->
...
</div>Explorer d'autres Goodies
D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.