Színeszközök

Színkontraszt-ellenőrző: WCAG AA és AAA arány – Ingyenes

Ingyenes, regisztráció nélkül, a böngésződben működik. Szöveg- és háttérszín WCAG kontrasztaránya: AA és AAA, normál és nagy szöveg, gombok és ikonok. Ha nem felel meg, közeli megfelelő színt javasolunk.

Így néz ki a nagy szöveg

Így néz ki a normál törzsszöveg. A gyors barna róka átugrik a lusta kutyán, a kisebb betűs szöveg, például egy képaláírás, alatta fut.

Kis szöveg: 14px-es képaláírás.

Gomb
Kontrasztarány13.08:1
  • Normál szöveg, AA: MegfelelTörzsszöveg, legalább 4.5:1
  • Normál szöveg, AAA: MegfelelFokozott, legalább 7:1
  • Nagy szöveg, AA: Megfelel18 pt+, vagy 14 pt+ félkövér, legalább 3:1
  • Nagy szöveg, AAA: MegfelelFokozott, legalább 4.5:1
  • Ikonok és vezérlők, AA: MegfelelGombok, szegélyek, diagramvonalak: 3:1

A WCAG 2 kontrasztképletet használja. Az arányokat sosem kerekítjük felfelé, így a 4.49:1 nem számít 4.5:1-nek. Az eszközödön ellenőrzött.

Miért érdemes használni ezt: Színkontraszt-ellenőrző

100%-ban ingyenes
Használd, ahányszor szeretnéd. Nincs regisztráció, nincs vízjel, nincs mit telepíteni.
Adatvédelem a tervezésben
Amit beírsz, a böngésződben marad, és soha nem küldjük el nekünk.
Bármilyen eszközön működik
A böngésződben fut Windows, Mac, Linux, Android és iPhone rendszeren. Nincs szükség alkalmazásra.

Így használd: Színkontraszt-ellenőrző

  1. A Szövegszín és a Háttér megadása HEX, rgb(), hsl() formában vagy névvel, például navy; mintákból is kiválasztható. A Csere gombbal felcserélhetők.
  2. A kontrasztarány és az öt eredmény olvasása: normál szöveg AA és AAA, nagy szöveg AA és AAA, valamint ikonok és vezérlők.
  3. Az élő előnézetben látszanak a címsorok, a törzsszöveg, a kisbetűs részek és egy gomb a te színeiddel.
  4. Ha egy szint nem felel meg, a Legközelebbi megfelelő színek közül egyet kiválasztva megmarad a színárnyalat, és csak a szöveg világossága vagy sötétsége változik.

Gyakori kérdések

Mekkora kontrasztarány kell?

A WCAG AA normál szövegnél 4.5:1, nagy szövegnél és a felületi elemeknél, például gomboknál, szegélyeknél és ikonoknál 3:1 arányt kér. AAA normál szövegnél 7:1, nagy szövegnél 4.5:1.

Mi számít nagy szövegnek?

Legalább 18 pont (24px) normál, vagy 14 pont (kb. 18.7px) félkövér.

Hogyan számolják a kontrasztarányt?

A WCAG 2 képlettel: mindkét szín relatív fényessége kiszámítódik, majd a világosabb értékhez 0.05-öt adva elosztják a sötétebb értékkel, szintén 0.05-tel növelve. Az eredmény 1:1 (nincs kontraszt) és 21:1 (fekete a fehéren) között van.

Miért nem felel meg a 4.49:1?

A WCAG szerint az arányt nem szabad felfelé kerekíteni, így a 4.5:1 alatti érték nem felel meg az AA normál szövegnél. Ez az eszköz soha nem kerekít felfelé.

Hogyan javítom a nem megfelelő színt?

A Legközelebbi megfelelő színek alatt az eszköz javasol egy AA-s és egy AAA-s szövegszínt. Mindkettő megtartja a színárnyalatot és a telítettséget, és csak a világosságot változtatja, így a márkaszín felismerhető marad. Kattints az egyikre a használatához.

Kezeli az átlátszó szövegszíneket?

Igen. Az áttetsző szövegszín, például rgba(26, 20, 70, 0.6), a háttérrel keverve kerül mérésre. A háttér átlátszóságát az eszköz figyelmen kívül hagyja, tömörnek veszi.

A gomboknak és ikonoknak is kell kontraszt?

Igen. A WCAG 2.1 3:1 arányt kér a felületi elemek (gombszegélyek, űrlapmezők, ikonok, diagramvonalak) és a mellettük lévő színek között. Az Ikonok és vezérlők eredmény ezt ellenőrzi.

Ha megfelel, akkor az oldalam akadálymentes?

Azt jelenti, hogy ez a színpár megfelel a WCAG kontrasztszabályának. Az akadálymentesség ennél sokkal több: szövegméret, fókuszállapotok, alternatív szöveg, billentyűzetes használat, ezért ezt csak egy ellenőrzésnek tekintsd a többi között.

Ingyenes a(z) Színkontraszt-ellenőrző?

Igen. Ingyenesen használható, regisztráció és telepítés nélkül.

Súgók és útmutatók (angolul)

Kapcsolódó eszközök