Koloreen kontrastea egiaztatu

Aukeratu testuaren kolorea eta atzealdearena, zure diseinua irakurgarria eta irisgarria den jakiteko. Kontraste-erlazioa emango dizugu, WCAG jarraibideen AA eta AAA mailak betetzen dituen eta, iristen ez bada, betetzen duen testu-kolorerik antzekoena.

Testua eta atzealdea

HEX, rgb(), hsl(), oklch() edo CSS izenak onartzen ditu. Testua erdi-gardena bada, atzealdearekin nahasten da.

Adibideko testu handia

Hau tamaina arrunteko testua da. Web-irisgarritasunak esan nahi du edonork, ikusmen urria edo daltonismoa duenak ere, zure orria irakurri eta erabili ahal izatea.

Botoia

Kontraste-erlazioa

Testu arrunta (4,5:1) AA
Testu arrunta (7:1) AAA
Testu handia (3:1) AA
Testu handia (4,5:1) AAA
Ikonoak eta osagaiak (3:1) AA

Zer da kontraste-erlazioa?

Kontraste-erlazioak bi koloreren luminantzia erlatiboa alderatzen du, eta 1:1etik (kolore bera) 21:1era (beltza zuriaren gainean) doa. W3Cren WCAG 2 irisgarritasun-jarraibideek definitzen dute, eta irisgarritasun-legeek (Espainian, 1112/2018 ED eta EN 301 549 araua) eta Lighthouse bezalako tresnek erabiltzen duten erreferentzia da.

AA eta AAA mailak

AA da normalean eskatzen den maila: 4,5:1 testu arruntarentzat eta 3:1 testu handiarentzat (24 px-etik aurrera, edo 18,66 px lodian). AAA maila indartua da: 7:1 eta 4,5:1, hurrenez hurren. Ikonoek, inprimaki-eremuen ertzek eta interfazeko beste osagai batzuek gutxienez 3:1 behar dute inguruko koloreekiko.

Logotipoak eta testu apaingarria edo desgaitutako elementuena salbuetsita daude.

Nola hobetu kontrastea

Ia beti nahikoa da testua iluntzea (edo atzealde ilunetan argitzea) ñabardura aldatu gabe: horregatik proposatzen dizugu kolore bera beste argitasun batekin, OKLCH espazioan kalkulatua, aldaketa ahalik eta txikiena izan dadin. Saihestu gris argiko testua zuriaren gainean eta irudien gaineko testua tarteko geruza ilunik gabe.