Wat is CSS contrast-color() Functiegenerator?
De CSS contrast-color() functie (Baseline 2026) selecteert de kleur met de hoogste contrastratio uit een lijst van kandidaten tegen een gespecificeerde achtergrond. U geeft de achtergrondkleur en een lijst kandidaatkleuren. De functie evalueert de WCAG-contrastratio van elke kandidaat en retourneert de beste.
Snel antwoord
Gebruik CSS contrast-color(background vs kandidaten...) om automatisch de meest leesbare kleur te selecteren. Werkt in Chrome 132+, Safari 19+ en Firefox 136+. Gebruik to max voor maximum contrast.
Last updated: 2026-05-30
Beperkingen
- Niet ondersteund voor Chrome 132, Safari 19 of Firefox 136.
- Contrast is gebaseerd op relatieve luminantie, een wiskundige benadering.
- Selecteert een enkele kleur uit de lijst, kan niet mengen.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Voer de achtergrondkleur in (hex, rgb, hsl of named color).
- Voeg kandidaatkleuren toe. De functie evalueert elke kandidaat en kiest de beste.
- Kies de contrastmodus: to max voor hoogste contrast of prioriteitsvolgorde.
- Kopieer de contrast-color() expressie in uw stylesheet.
Waarvoor je het kunt gebruiken
- Tekst overlays op hero-afbeeldingen die leesbaar moeten blijven.
- Badge- en tag-componenten die tekstkleur aanpassen aan de achtergrond.
- Dynamische knopsystemen die tekstkleur aanpassen aan de knopkleur.