The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators. The macOS version was developed by Cédric Trévisan based on the Windows version developed by Jun in collaboration with Steve Faulkner.
I was testing some text (hex code #999999 on a white background) and saw that the result was 2.8:1. I tested the same text in Chrome's dev tools and got a result of 2.85:1. I then tested the same colors in WebAIM's and Level Access' analyzers and they returned the same 2.85:1 result.
I’m using CCA 2.2 (1) on OS X 10.11.3, and it seems that the app disappears when it’s not the front-most app. (That seems like an odd behavior, so I’m almost wondering if maybe I’ve messed up the app’s configuration somehow?)
I have downloaded the current version and am working on a Mac Pro, on OS Sierra 10.12.5.
When I try to use the picker, it lands about 3.5” above the object I’m trying to measure.
Is there a way to make this align properly?
Many websites now use opacity either directly on the colour (example: rgba(255, 0, 0, 0.2);) or by setting and opacity on an element (example: opacity: 0.4).
It would be very useful to be able to set an opacity for the foreground colour and a background colour to get the contrast of the combination of both.
I've just updated to last CCA (2.4), but I had same problem on previous.
I use the dropper to get the colour and also if the last CCA uses the system one, colour is different from the one defined in CSS.
I have some swatches of color defined in a branding manual. When I pick from those colors in Photoshop, the HEX-values are changed. Like #73d1ff is turned into #6fd0ff when picked from Photoshop. The PSD file is sRGB. The Displays are set to sRGB profiles.
Other colorpickers pick the correct colors from Photoshop. but not CCA-OSX.
Following discussion here w3c/wcag#200 (comment) there is/will be an issue with the way in which CCA currently rounds results to single decimal point and then uses the rounded value for its pass/fail determination.
4.5:1 and 3:1 need to be treated as absolute thresholds, and the non-rounded result needs to be assessed against this contrast. so for instance 4.49124578:1 needs to fail as it is below 4.5:1 in absolute terms - it can't be rounded first to 4.5:1 and THEN compared to the threshold figure.
this may require some extra tweaking of the displayed text for these cases. Maybe for values that are between 4.45 - 4.4999999 (or whatever the precision internally is) the output should read "The contrast ratio is: just below 4.5:1" (and the same for 2.95 - 2.9999 for the 3:1 ratio)
I´ve been using CCA for years, and has been a big fan.
Recently however, I am not, as CCA for Mac consistently gives me the wrong color when using the color picker.
It doesn´t really matter what kind of color it is, it is always wrong, which erodes my confidence in the tool. Although the error is inside of a few percent, it can be enough to tilt the result in either direction.
Some examples:
I'm a product designer at Facebook and would like to recommend this tool for all designers at Facebook to use. However, I'm reluctant to recommend this tool because it regularly crashes. I really want designers to use this tool over other tools out there because the color picker is a really convenient way to quickly test colors. And it's something non-designers (engineers, product managers, etc) can easily use since they wouldn't need to know the Hex.
My workflow consists of toggling back and forth between the tool and Sketch (or Photoshop). I copy the hex value from Sketch and paste it into the foreground or background fields. It'll crash after about 6 times of manually entering a hex value into the fields.
On NSTextFields, when the color is set to black.
When we change the background color, to the text color, is adjusted to white if the contrast is not good enought
I don't want to look a gift horse in the mouth, but...
I loved the older version's simple method to take an existing color and simply change the value to achieve an accessible version. This was especially helpful when the original color was around 3.5:1 and just needed to be bumped up/down.
The current version requires us to balance rgb values. Is it possible to bring back the original slider as an alternate adjustment?
Otherwise, thank you for continuing to provide a great resource.
Sometimes there are >2 colours that need to be compared (e.g. enabled/disabled controls -- though these should probably also be indicated with other visual means as well as colour -- and different data series in charts).
I would love to see this being able to work out the ratios between three colours (or more), and also find solutions to the contrast ratios, if they exist.
I am a big fan of the Colour Contrast Analyzer but with the new version I have to click multiple times to get the real picker and in the old version I just had to click picker and there it was.
I always have Safari in full-screen mode. I wonder if it's possible to allow CCA to be visible "over the top" of Safari, so that it can be used like an inspector on Safari? This may mean changing the window type when running "over the top" of a full-screen app.
Not sure if this is possible, but it would be nice!
Noticed discrepancies in the color code picked directly from HTML rendered in browser.
Attached example shows three different values for Firefox, Chrome and Safari browsers for the same color point. (sample source code is included in the screenshot).
This occurs on iMac desktop only and not on Macbook (laptop).