Farger & Kontrast

Den här sidan samlar fyra gratisverktyg för att arbeta med gränssnittsfärger. Färgblindhetssimulator visar en färg så som tre färgseendebrister uppfattar den, Färgkontrast mäter WCAG-kontrasten mellan två färger och HEX till HSL konverterar en HEX-färg till HSL. Färgpalett genererar ljusa och mörka varianter. De hjälper formgivare och utvecklare att kontrollera läsbarhet och konsekvens. Allt stannar i webbläsaren, utan registrering.

Välj utifrån din fråga. Färgblindhetssimulator kontrollerar hur flera färgseendebrister kan uppfatta en färg. Färgkontrast testar WCAG-förhållandet mellan två nyanser. HEX till HSL översätter en HEX-kod till en modell som är enklare för att justera ljushet och mättnad. Färgpalett skapar ljusa och mörka varianter. För en tillgänglighetsgranskning börjar du med kontrast och testar sedan med simulatorn. För att bygga ett spann börjar du med HEX till HSL eller paletten.

Så använder du

Börja med Färgkontrast för att mäta WCAG-kvoten mellan text och dess bakgrund innan du gör estetiska val.
Testa sedan en kombination med Simulator för färgblindhet för att upptäcka nyanser som blir svåra att skilja.
Gå vidare till HEX till HSL när du behöver justera ljushet eller mättnad för en exakt färgkod.
Använd Färgpalett för att generera ljusa och mörka varianter som förblir konsekventa med utgångsnyansen.

Vanliga frågor

Vad används WCAG-kontrast till?

Färgkontrast mäter WCAG-kontrasten mellan två färger. Den här kontrollen hjälper dig att se om text och bakgrund förblir läsbara. Verktyget är gratis och kräver ingen registrering, och det körs i webbläsaren.

Ersätter simulatorn verkliga tester?

Nej. Färgblindhetssimulator visar en uppskattning för tre färgseendebrister. Den hjälper till att upptäcka problematiska kombinationer, men ersätter inte återkoppling från berörda personer. Använd den tillsammans med Färgkontrast för en mer fullständig kontroll.

Hur kan jag skapa varianter av en färg?

Färgpalett genererar ljusa och mörka varianter. Om du utgår från en HEX-kod kan HEX till HSL först hjälpa dig att förstå kulör, mättnad och ljushet. Båda verktygen är gratis och kräver ingen registrering.

I vilken ordning ska jag kontrollera ett tillgängligt gränssnitt?

Kontrollera Färgkontrast först på text och bakgrunder. Testa sedan kombinationer med Simulator för färgblindhet. Om en nyans behöver justeras, använd HEX till HSL och sedan Färgpalett för att föreslå konsekventa varianter. Denna ordning sätter läsbarhet före stil.

När ska jag använda HEX till HSL i stället för Färgpalett?

Använd HEX till HSL när du utgår från en HEX-kod och vill förstå eller ändra dess nyans, mättnad och ljushet. Välj Färgpalett när du behöver ljusa och mörka varianter kring en bas. De två verktygen kan stödja varandra.