Test your website's RGAA compliance for free

<img src="/graph-ca-2025.png" width="600">

<img src="/graph-ca-2025.png" width="600"
     alt="Chiffre d'affaires 2025 : 1,2 M€, en hausse de 18 % sur 2024">

The alt="chart" reflex passes the automated rule and fails criterion 1.3 at audit time. The alternative must carry the information, not name the file. If the image is decorative, use alt="" — empty, not absent.

<p style="color: #9ca3af">
  Champ facultatif
</p>

<p style="color: #565f6e">
  Champ facultatif
</p>

Light grey on white is the most banal non-compliance on the French web, and it is fixed by changing one value: #9ca3af gives 2.54:1 on white, #565f6e gives 6.45:1. RGAA threshold: 4.5:1 below 24px (or below 18.5px bold), 3:1 above. Worth knowing — this rule reads inline styles, not your external stylesheets: for a colour pair coming from a class, use our contrast checker.

<input type="email" placeholder="Votre email">

<label for="email">Votre email</label>
<input type="email" id="email" name="email"
       autocomplete="email">

A placeholder is not a label: it vanishes on input, and most screen readers do not restore it reliably. If the design forbids a visible label, aria-label="Your email" passes the criterion — but a visible label is better for everyone.

<div class="card" onclick="openModal()">
  Voir le détail
</div>

<button type="button" class="card" onclick="openModal()">
  Voir le détail
</button>

Adding role="button" tabindex="0" silences our rule, but you then have to handle Enter and Space and the pressed state yourself. A real <button> gives you focus, keyboard and role for free. The CSS reapplies as-is with an appearance reset.

* {
  outline: none;
}

:focus-visible {
  outline: 3px solid #4f46e5;
  outline-offset: 2px;
}

This outline:none lingers in nearly every CSS reset copied from an old template. It makes the site unusable by keyboard without a single designer noticing, because the mouse never triggers :focus-visible. Our rule reads your inline <style> and flags it.