search

ThePacielloGroup / CCAe

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.
http://www.paciellogroup.com/resources/contrastanalyser/
GNU General Public License v3.0
478 stars 108 forks source link

Color picker is not selecting the correct color of the input field border line. #350

Open RagupathyR opened 3 months ago

RagupathyR commented 3 months ago

Describe the bug When I use the colour contrast analyser to assess non-text elements like input fields, comboboxes, and checkboxes border colors, the colour picker does not select the correct color that is used or delivered to the element. For example, even if the border color is 1px solid #8c8c8c, which has a color ratio of 3.4:1 with the white background, the color picker selects the color Hex #B6B6B6, which has a color ratio of 2:1 with the white background.

Desktop:

To Reproduce Steps to reproduce the behavior: Choose the colour picker for the foreground color and move it to the input field border to select the correct colour.

Expected behavior I should be able to pickup the correct colour from the input field border. i.e., #8c8c8c 

Screenshots 2024-08-13_14-35-47

Additional context Note: When I snap a screenshot and use the color contrast analyzer, I obtain the hex color #909090, which is 3.2:1 and it is nearly to the expected result.

ferllings commented 3 months ago

@RagupathyR Could you check your display color profile is set to sRGB?

RagupathyR commented 3 months ago

@ferllings Yes, it is set to sRGB IEC61966-2.1 as the system default.

ferllings commented 3 months ago

What browser do you use? Do you have a online code I can check?

RagupathyR commented 3 months ago

@ferllings I am using Chrome browser (latest version). Please see the attached screenshot of the code. 2024-08-16_14-58-48

RagupathyR commented 3 months ago

Noticed another one issue with colour contrast Analyser. Describe the bug:

When I use the colour contrast analyser to assess text elements error message (red colour), the colour picker does not select the correct color that is used or delivered to the error text. For example, the colour is used is #df1010, which has a color ratio of 5:1 with the white background, the color picker selects the color Hex #E32E2E, which has a color ratio of 4.471:1 with the white background.

Desktop:

OS: [Windows 11 64 bits] Version [23H2] To Reproduce Steps to reproduce the behavior: Choose the colour picker for the foreground color and move it to the error message text (red colour) to select the correct colour.

Expected behavior I should be able to pickup the correct colour from the input field border. i.e., #df1010

Screenshot 2024-08-27_18-28-41