Kleurcontrastchecker
Meet met deze kleurcontrastchecker het contrast tussen een voorgrond- en achtergrondkleur. Bekijk de resultaten voor WCAG 2.2 AA en AAA, de dichtstbijzijnde kleur die voldoet, transparante lagen en kleurenparen uit een palet.
Gratis, zonder registratie. Werkt in je browser en doet geen AI-aanroepen.
Contrastverhouding
4,54:1
| Gebruikt voor | Niveau | Vereist | Resultaat |
|---|---|---|---|
| Normale tekst | AA | 4,5:1 | Geslaagd |
| Grote tekst | AA | 3:1 | Geslaagd |
| Interfaceonderdelen en afbeeldingen | AA | 3:1 | Geslaagd |
| Normale tekst | AAA | 7:1 | Niet geslaagd |
| Grote tekst | AAA | 4,5:1 | Geslaagd |
Deze voorvertoning gebruikt het model van Machado uit 2009 op maximale sterkte. Het is een benadering van kleurwaarneming, geen diagnose. De WCAG-resultaten zijn altijd gebaseerd op de oorspronkelijke zichtbare kleuren.
Machado, Oliveira en Fernandes: gepubliceerd modelNormale tekst van 16 pixels ziet eruit als deze zin.
Grote tekst van 24 pixels
Een rand van 2 pixelsLicentie voor het kleurwaarnemingsmodel
Copyright 2013 Colour Developers Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE
Controleer een kleurenpalet
Voeg minstens twee kleuren toe om een palet te vergelijken. Herhaalde kleuren tellen één keer mee.
Een kleurcontrastchecker drukt het verschil tussen twee kleuren uit als een verhouding van 1:1 tot 21:1. Controleer tekst volgens WCAG 2.2 AA en AAA en de drempel van 3:1 voor niet-tekstuele elementen. Vind een kleur die voldoet zonder de tint te veranderen, voeg transparante lagen samen op een gekozen ondergrond, vergelijk maximaal 12 paletkleuren en bekijk met het Machado-model hoe kleuren eruitzien bij een kleurzienstoornis.
Zo gebruik je deze tool
- Voer twee kleuren in
- Typ een hexcode zoals #1a1a2e of #fff, een rgb()- of hsl()-waarde of een CSS-kleurnaam zoals navy. Je kunt ook de kleurkiezers gebruiken. Alpha in rgba(), hsla() en hexwaarden van 4 of 8 cijfers wordt ondersteund. Stel de onderliggende kleur in om transparante achtergrond- en tekstlagen samen te voegen. De schuifregelaars voor dekking vermenigvuldigen de alpha die al in elke invoer staat. Het contrast wordt berekend met de niet-afgeronde, samengestelde kleuren; de hexlabels zijn benaderingen.
- Zo wordt de verhouding berekend
- De relatieve luminantie van elke kleur wordt berekend met de WCAG-formule. Voor de verhouding wordt de luminantie van de lichtere kleur plus 0.05 gedeeld door die van de donkerdere kleur plus 0.05. De weergegeven verhouding wordt naar beneden afgerond op twee decimalen, zodat 4.499 nooit als voldoende wordt getoond.
- Wat de niveaus betekenen
- AA is het niveau waarnaar de meeste wetten en richtlijnen verwijzen: 4.5:1 voor gewone tekst en 3:1 voor grote tekst. AAA vereist 7:1 en 4.5:1. Grote tekst is minimaal 24 px, of ongeveer 18.7 px als deze vetgedrukt is. Pictogrammen, randen van invoervelden en focusmarkeringen hebben een contrast van 3:1 nodig met de aangrenzende kleuren.
- De voorgestelde kleur
- Als een niveau niet wordt gehaald, behouden we de tint en verzadiging van de kleur die je wilt aanpassen. Alleen de lichtheid verandert, in kleine stappen, totdat de verhouding voldoet. De dichtstbijzijnde kleur die voldoet, verschijnt met de bijbehorende verhouding. 'Dichtstbijzijnde' betekent de kleinste verandering in HSL-lichtheid in stappen van 0.001, niet de kleinste waarneembare kleurafstand. Als je een voorstel toepast, wordt die laag volledig dekkend. Kies bij transparante tekst een vervangende tekstkleur, omdat een andere achtergrond beide zichtbare kleuren zou veranderen.
- Palet- en kleurzichtvoorbeelden
- Voer maximaal 12 verschillende, volledig dekkende kleuren in, gescheiden door nieuwe regels, komma's of puntkomma's. De rijen zijn voorgrondkleuren, de kolommen achtergrondkleuren. Elk paar toont de verhouding en of het aan AA voor gewone tekst voldoet. Selecteer een paar om alle niveaus te bekijken. De voorbeelden voor protanopie, deuteranopie en tritanopie gebruiken Machado, Oliveira en Fernandes (2009) bij maximale ernst, met matrices uit Colour Science onder BSD-licentie. Ze benaderen de waarneming, maar veranderen de WCAG-berekening niet en stellen geen diagnose.
Vragen voordat je begint
Bekijk je bedrijf in AI-antwoorden
Technische controles helpen je een pagina te verbeteren. De gratis AI-zichtbaarheidsscan toont welke antwoorden voor je bedrijf zijn gecontroleerd en wat je daarna kunt aanpakken.