De kleurcontrastcontrole meet de contrastverhouding tussen een voorgrond (tekst)kleur en een achtergrondkleur en vertelt u of dat paar voldoet aan de richtlijnen voor toegankelijkheid van webcontent. Het rapporteert een enkel getal tussen 1:1 en 21:1 en verdeelt het tegen de WCAG 2.2-drempels voor AA en AAA bij zowel normale als grote tekstgroottes, plus de afzonderlijke 3:1-drempel voor gebruikersinterfacecomponenten en afbeeldingen.
Contrast is het verschil in relatieve luminantie tussen twee kleuren, niet alleen hoe verschillend ze eruit zien. Twee kleuren kunnen duidelijk aanvoelen terwijl ze nog steeds falen voor lezers met een slecht zicht, een tekort aan kleurenzicht of iedereen die een telefoon gebruikt in fel zonlicht. De verhouding wordt berekend met de exacte sRGB-relatieve-luminantieformule gedefinieerd door WCAG, dus het resultaat komt overeen met welke audittools en gebruikers van schermlezers er ervaren in plaats van een ruwe visuele schatting.
Alles draait in uw browser. Typ of plak kleuren als Hex, RGB, HSL of een CSS-sleutelwoord, bekijk een live tekstvoorbeeld-update en als een paar mislukt, kunt u een voorgestelde kleur toepassen die voorbij is. Er wordt niets geüpload, er is geen aanmelding en de tool blijft offline werken zodra de pagina is geladen.
Typ of plak de voorgrondkleur in elk gemeenschappelijk formaat - #1A1A1A, RGB (26,26,26), HSL (0,0%,10%) of een trefwoord zoals Navy. Een kleurstaal en native picker laten je het verfijnd.
Stel de achtergrond in waarop de tekst staat. Als uw tekstkleur transparantie heeft, wordt deze over deze achtergrond gemengd voordat de verhouding wordt gemeten, overeenkomend met wat gebruikers daadwerkelijk zien.
De exacte contrastverhouding verschijnt met pass- of fail-badges voor AA en AAA bij normale en grote maten, plus de 3:1 UI-componentcontrole, allemaal naast een live voorbeeld van tekst op je achtergrond.
Als een combinatie mislukt, past u de voorgestelde toegankelijke kleur toe - de tool duwt de tekst lichter of donkerder totdat het uw doelniveau wist, dan kunt u de vaste waarde kopiëren.
Gebruikt de officiële sRGB-formules voor relatieve lichtsterkte en contrastverhoudingen van WCAG 2.2, dus het aantal komt overeen met formele audits tot twee decimalen in plaats van de komma
Elk resultaat wordt beoordeeld op basis van AA (4.5:1), AAA (7:1), de drempels met grote tekst (3:1 en 4,5:1), en de 3:1-regel voor niet-tekstuele UI-componenten en grafische objecten
Een echte steekproef van normale en grote tekstweergaven op de door u gekozen achtergrond terwijl u typt, zodat u de leesbaarheid naast de numerieke score kunt beoordelen
Wanneer een paar mislukt, laat de tool de tekstkleur lichter of donkerder in HSL lopen totdat het aan uw doelverhouding voldoet en een doorgeefwaarde biedt die u met één klik kunt toepassen
Pick colors and convert between HEX, RGB, and HSL formats
Create beautiful CSS gradients with live preview
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!