Een leesbaar kleurenpalet met gemeten contrast maken.
Wijs kleuren rollen toe en test echte tekst-achtergrondparen. Mooie kleuren alleen garanderen geen leesbaarheid of toegankelijke interactieve standen.
Stem de werkwijze af op je taak.
Kies kleuren per rol met exacte waarden en test bedoelde voorgrond-achtergrondparen. Neem interactiestanden en andere ondergronden op. Scheid esthetische voorkeur van gemeten contrast en bekijk echte componenten.
- Wat je aanlevert
- Merkeigenschappen en toegankelijkheidseisen.
- Wat je krijgt
- Paletkandidaten met gecontroleerd contrast.
Bekijk de invoer en het resultaat.
Illustratieve invoer en uitvoer · een leervoorbeeld, geen live uitvoering van WebAct
Voorbeeld invoerveld
Create a small UI palette using navy and warm cream, plus an orange-brown accent. Need body text, links and a filled action button. Calculate contrast for solid, opaque pairs.
Uitgewerkt voorbeeld
Background: #fff7ed Body text: #172554 — contrast on background ≈ 13.84:1 Underlined links/accent text: #9a3412 — contrast on background ≈ 6.88:1 Action button: #9a3412 background, #ffffff label — contrast ≈ 7.31:1 These pairs exceed the 4.5:1 normal-text threshold. This checks the stated solid-color pairs only; focus, hover, disabled states and the rest of the interface still need review.
Laad deze invoer in de prompt en kopieer deze naar WebAct om de taak te proberen. Je resultaat kan afwijken van het voorbeeld.
Keuzes en probleemoplossing.
Garandeert één tekstpaar met hoog contrast een toegankelijke interface?
Nee. Andere standen, bediening en signalen naast kleur vragen controle. De paarmeting is maar een deel.
Waarom werkt een accent decoratief maar niet voor kleine tekst?
Het contrast met de achtergrond kan te laag zijn. Geef de kleur een andere rol of pas het paar aan.
Bron voor deze werkwijze.
Probeer het met je eigen bron.
Vervang het voorbeeld door je eigen materiaal in de taakprompt. Behoud de eisen die je nodig hebt en kopieer de taak naar WebAct.
De taak aanpassen en kopiëren ↑