[{"data":1,"prerenderedAt":98},["ShallowReactive",2],{"tool-guide:color-converter":3},{"overview":4,"whatIs":5,"useCases":6,"steps":12,"commonMistakes":17,"relatedStandards":23,"comparison":33,"example":75,"limitations":79,"faq":82},"Color & Contrast converts common color notations and calculates the WCAG contrast ratio between a foreground and background pair.","Color notation varies across tools and contexts: designers hand over hex codes (#79C58D), CSS authors use RGB or HSL, and print workflows use CMYK. A color converter translates between these representations so you can move values between design tools, code, and documentation without manual calculation. Beyond conversion, contrast ratio is critical for accessibility. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors: 4.5:1 for normal text and 3:1 for large text at the AA level, or 7:1 and 4.5:1 at the stricter AAA level. Failing these thresholds means some users literally cannot read the text. This tool calculates the WCAG 2.x relative luminance contrast ratio instantly, showing the pass\u002Ffail result for both AA and AAA at normal and large text sizes. It also provides the OKLCH representation, a perceptually uniform color space that is becoming the preferred way to define colors in modern CSS because equal numeric steps produce equal perceived changes in lightness and chroma.",[7,8,9,10,11],"Design-to-code handoff — convert Figma hex values to the HSL or OKLCH format your CSS uses.","Accessibility auditing — check whether your text and background colors meet WCAG AA or AAA contrast requirements.","Theme development — convert a brand color to HSL, adjust the lightness for dark mode, and convert back to hex.","Print preparation — get an approximate CMYK breakdown of an RGB screen color before sending assets to a printer.","Documentation — include both hex and RGB values in a style guide so developers and designers use the same color.",[13,14,15,16],"Enter a color in any supported format: hex (#79C58D), RGB (121, 197, 141), HSL (136, 39%, 62%), or CMYK.","Review the equivalent values in all other formats. Copy any representation.","For contrast checking, set a foreground and background color.","Read the contrast ratio and pass\u002Ffail results for WCAG AA and AAA at normal and large text sizes.",[18,19,20,21,22],"Ignoring alpha transparency in contrast checks — WCAG contrast requires fully opaque colors. If your text or background has transparency, calculate the composited color before checking contrast.","Adjusting lightness in RGB — RGB is not perceptually uniform. Increasing all channels equally does not produce a perceptually lighter color. Use HSL lightness or OKLCH for predictable adjustments.","Trusting CMYK for print — screen-to-CMYK conversion is an approximation. Accurate print color requires ICC profiles specific to the paper and printer. Use the CMYK value as a starting point, not a proof.","Checking contrast with design tool eyedroppers — anti-aliased text blends foreground and background pixels. Check contrast against the actual background color, not a pixel sample from rendered text.","Meeting AA but ignoring AAA — AA (4.5:1) is the minimum. Aim for AAA (7:1) when possible, especially for body text that users read for extended periods.",[24,27,30],{"title":25,"url":26},"WCAG 2.2 — Success Criterion 1.4.3 (Contrast)","https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fcontrast-minimum.html",{"title":28,"url":29},"CSS Color Level 4 — oklch() and oklab()","https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-color-4\u002F#specifying-oklab-oklch",{"title":31,"url":32},"MDN — CSS color values","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fcolor_value",{"heading":34,"columns":35,"rows":41},"Color format comparison",[36,37,38,39,40],"Hex","RGB","HSL","OKLCH","CMYK",[42,50,56,63,69],{"label":43,"values":44},"Use case",[45,46,47,48,49],"Web, design tools","CSS, code","CSS, theme tuning","Modern CSS","Print",{"label":51,"values":52},"Perceptually uniform",[53,53,54,55,53],"No","Partially","Yes",{"label":57,"values":58},"Alpha support",[59,60,61,62,53],"#RRGGBBAA","rgba()","hsla()","oklch(L C H \u002F a)",{"label":64,"values":65},"Human-readable",[66,67,68,68,67],"Moderate","Low","High",{"label":70,"values":71},"Browser support",[72,72,72,73,74],"Universal","Modern","N\u002FA (print)",{"label":76,"input":77,"output":78},"Convert an accent color","#79C58D","rgb(121, 197, 141)\nhsl(136, 39%, 62%)",[80,81],"CMYK conversion is an approximate screen-color conversion, not a printer profile proof.","A passing ratio does not replace review of font size, weight, states, and forced-colors behavior.",[83,86,89,92,95],{"question":84,"answer":85},"What is WCAG contrast ratio?","WCAG contrast ratio measures the luminance difference between two colors. A ratio of at least 4.5:1 is required for normal text and 3:1 for large text to meet WCAG AA.",{"question":87,"answer":88},"Does this tool support alpha transparency?","Color conversion supports opaque Hex, RGB, HSL, and CMYK values. Alpha-channel colors are not accepted because contrast requires fully opaque foreground and background.",{"question":90,"answer":91},"Is CMYK conversion accurate for print?","The CMYK conversion is a mathematical approximation for screen use. Accurate print reproduction requires ICC color profiles and proofing against the target printer.",{"question":93,"answer":94},"What is OKLCH and why should I use it?","OKLCH is a perceptually uniform color space where equal numeric steps produce equal perceived changes. It makes theme generation, palette creation, and lightness adjustments more predictable than HSL.",{"question":96,"answer":97},"What is the difference between WCAG AA and AAA?","AA requires 4.5:1 contrast for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. AAA is harder to meet but provides better readability.",1788868140177]