jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS- en ontwerptools

Gratis CSS contrast-color() Functiegenerator

Genereer contrast-color() CSS-functies die automatisch de meest leesbare tekstkleur uit een lijst selecteren.

Tool laden...

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

  1. Voer de achtergrondkleur in (hex, rgb, hsl of named color).
  2. Voeg kandidaatkleuren toe. De functie evalueert elke kandidaat en kiest de beste.
  3. Kies de contrastmodus: to max voor hoogste contrast of prioriteitsvolgorde.
  4. 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.

Gebruik

Praktische voorbeelden

Voorbeeld

Hero tekst overlay

Een hero-banner gebruikt contrast-color(var(--hero-bg) vs white, black) als kopkleur.

Voorbeeld

Tag met dynamische kleuren

Een tag gebruikt contrast-color(var(--tag-bg) to max vs white, var(--tag-text)) voor maximale leesbaarheid.

Veelgemaakte fouten

  • to max gebruiken terwijl een specifieke kleurprioriteit bedoeld is.
  • Aannemen dat contrast-color() herberekent bij achtergrondwijziging.
  • Te veel kandidaatkleuren — twee of drie is voldoende.

Verificatie

  1. Test met meerdere achtergrondkleuren in DevTools Styles.
  2. Controleer de berekende kleur en WCAG-ratio in DevTools.

FAQ

Vragen over CSS contrast-color() Functiegenerator

Hoe berekent contrast-color() de contrastratio?

Het gebruikt het WCAG 2.2 relatieve luminantie-algoritme. De ratio varieert van 1:1 tot 21:1.

Welke browsers ondersteunen contrast-color()?

Chrome 132+, Edge 132+, Safari 19+, Firefox 136+. Gebruik progressieve verbetering.

Kan ik CSS-variabelen gebruiken?

Ja. Alle kleurargumenten accepteren var()-referenties.

Wat als geen kandidaat AA haalt?

De functie retourneert nog de kandidaat met de hoogste ratio.

Gerelateerde tools

Meer css- en ontwerptools

CSS- en ontwerptools

CSS-carrouselgenerator

Genereer native CSS-carrouselmarkup met scroll-snap, scrollknoppen, scrollmarkeringen en een toegankelijke lijststructuur. Geen JavaScript nodig.

Open tool

CSS- en ontwerptools

CSS Scroll-State-querygenerator

Genereer CSS scroll-state()-containerqueries om gesnapte, vastgezette of scrollbare elementen te stylen. Inclusief JavaScript-fallback voor ondersteuning in andere browsers.

Open tool

Probeer ook

Probeer ook