Il testo è leggibile sullo sfondo?

Progettisti e ingegneri hanno spesso bisogno di un sì o no a una domanda ingannevolmente semplice: questo colore di testo, a questa dimensione, è davvero leggibile su quello sfondo? Un rapporto di contrasto da solo non chiude il caso, perché le Web Content Accessibility Guidelines trattano il corpo grande con più indulgenza del testo corrente. Questo controllore prende un colore hex di testo, un colore hex di sfondo e una dimensione del carattere, classifica il campione come normal o large con la regola pubblicata di diciotto punti oppure quattordici punti in grassetto, poi confronta il rapporto ufficiale di contrasto per luminanza relativa con il minimo del livello che Lei ha chiesto. Il verdetto è un booleano chiamato legible, più il rapporto, la soglia e la classe di scala, così Lei può mostrare l’aritmetica accanto alla risposta.

Come si decide la leggibilità WCAG in base alla dimensione

Le Web Content Accessibility Guidelines non trattano ogni glifo allo stesso modo. Il corpo a sedici pixel ha un dovere di contrasto più stretto di un titolo a ventiquattro pixel, perché le forme più grandi restano leggibili con un divario di luminanza minore. Questo controllore trasforma quella regola in un solo booleano.

Analizza il colore del testo e quello dello sfondo come hex sRGB opaco, linearizza ogni canale a otto bit con la curva ufficiale a tratti e costruisce la luminanza relativa con i pesi 0.2126, 0.7152 e 0.0722. Il rapporto di contrasto è la luminanza più chiara più 0.05 divisa per la più scura più 0.05.

In parallelo converte la dimensione fornita in punti CSS, dove un punto equivale a quattro terzi di un pixel, e classifica il campione come large quando raggiunge almeno diciotto punti, oppure almeno quattordici punti ed è segnato in grassetto. Il corpo grande richiede un minimo di tre a uno per AA e di quattro virgola cinque a uno per AAA; il corpo normale richiede quattro virgola cinque e sette. Il livello richiesto sceglie uno di quei quattro pavimenti.

Il rapporto non arrotondato è confrontato con il pavimento così un 4.50 mostrato non fa passare un 4.499 sotto AA. Nulla è inferito da CSS, da catture o da una pagina dal vivo: Lei indica la coppia e la dimensione e ottiene un verdetto riproducibile per ticket, token di design e cancelli automatici.

Dove un controllo sì o no in base alla dimensione rende

I team di prodotto incontrano questa domanda quando un grigio di marca appare elegante su una diapositiva ma fallisce come corpo a sedici pixel su una scheda bianca, o quando un titolo a ventiquattro pixel passerebbe AA mentre la stessa coppia fallirebbe su un’etichetta di modulo. I progettisti incollano un hex di token, la superficie dietro e la dimensione della scala, poi leggono un solo indicatore legible prima di fissare la coppia.

Gli ingegneri collegano il contratto a controlli di pull request che bloccano un token di corpo quando il tipo regolare a sedici pixel scende sotto 4.5 a 1, eppure lasciano che un titolo hero a diciotto punti usi il pavimento di testo grande di 3 a 1. Gli specialisti di qualità e accessibilità allegano il rapporto numerico, la scala classificata e il booleano ai ticket così la correzione punta alla coppia e alla dimensione reali, non a una congettura da cattura.

I team di marketing verificano gli hex di campagna contro lo sfondo del sito alla dimensione reale della didascalia, non a una dimensione di intestazione immaginata. In questa pagina il lavoro gira interamente nel Suo browser. Abbini questo verdetto a uno scanner di accessibilità a pagina intera quando deve perlustrare il markup dal vivo, e a una matrice di rapporti di contrasto quando vuole tutte le bandiere AA e AAA di entrambe le scale insieme.

Usi questa pagina quando l’intento di ricerca è proprio se quel testo, a quella dimensione, è sicuro su quello sfondo.