Code Monkey home page Code Monkey logo

Comments (13)

micwoj92 avatar micwoj92 commented on August 15, 2024 4

This proves that windows 11 will not have high contrast options.

from whynotwin11.

namazso avatar namazso commented on August 15, 2024 1

Looks to be fine on high contrast:

8ff5c0b:

image

7d60b16:

image

Sad that you broke it custom themes, but whatever i guess they are custom after all, can't expect programs to actually consistently follow the system color scheme, it was easily user-modifiable in Vista last time:

8ff5c0b:

image

7d60b16:

image

from whynotwin11.

rcmaehl avatar rcmaehl commented on August 15, 2024

Thank you! I'll see if I can add a check for high contrast being enabled and swapping the background color. Black is fine right?

from whynotwin11.

namazso avatar namazso commented on August 15, 2024

would be better to simply use the current theme's background color instead, so that it works with custom themes too

dunno much about autoit but in C you'd do GetSysColor(COLOR_WINDOW)

from whynotwin11.

rcmaehl avatar rcmaehl commented on August 15, 2024

@namazso I've implemented a similar call. Please try one of the dev builds when you can and let me know if it's any better.

https://github.com/rcmaehl/WhyNotWin11/actions

from whynotwin11.

namazso avatar namazso commented on August 15, 2024

It's the exact same.
High contrast:
image
Custom dark theme:
image

from whynotwin11.

namazso avatar namazso commented on August 15, 2024

you are setting the default control color to the default window text color, which it already is by default:
https://github.com/rcmaehl/WhyNotWin11/blob/main/WhyNotWin11.au3#L53
What you probably want instead is changing the background colors to
_WinAPI_GetSysColor($COLOR_WINDOW)

from whynotwin11.

rcmaehl avatar rcmaehl commented on August 15, 2024

821ad9c is better but I'll see if I can work on improving it later on

from whynotwin11.

verdy-p avatar verdy-p commented on August 15, 2024

Even without high contrast, check the "Dark theme" in Windows 10 and 11. Beware of icons filled only with black and fully transparent elsewhere: they won't contrast correctly on the dark barkground of the side.

You should use thre default colors of the windows settings which defines a background color, a foreground color and color for emphasis which should contrast with both.
If you use static background colors (e.g. on green/yellow/red cells showing "OK" or "X" or "?"), the text in the colored cell should be using also a contrasting static color (text in plain white on green or red, but should be full black on yellow/orange).

  • Only text elsewhere on very light or plain white background can use a dark gray color (light theme) or emphasis color (like medium blue or green for active links).
  • Only text elsewhere on very dark or plain black background can use a light gray color (dark theme) or emphasis color (like medium blue or green for active links).
    The two last options are properly configured in the Settings panel, taking into account accessibility. You should not deviate by choosing other colors.

For icons on the lateral side, render them on a contrasting medium colored background, notably because the non transparent parts are plain black. You can safely use the emphasis color, provided that you checked its ligthness is not too dark, otherwise compute a lighter color from the contrasting color (same hue, same saturation level, just make it use at least 50% lightness, suing the HSL color model).

Then check that other text you'll place on this colored lateral panel will contrast enough with this background (ideally that text should be only plain black in the light time, or plain white in the dark theme, like for the rest of the UI

from whynotwin11.

namazso avatar namazso commented on August 15, 2024

@verdy-p it seems to use default colors now most of the time, on my custom dark theme it no longer looks like in my previous comment, so thats an improvement:

image

from whynotwin11.

rcmaehl avatar rcmaehl commented on August 15, 2024

@verdy-p it seems to use default colors now most of the time, on my custom dark theme it no longer looks like in my previous comment, so thats an improvement:

image

Part of it is the fact that I have to deal with recoloring the background and recoloring the icon when I know nothing about GDI+. There's individual examples for both but not a single example that does both at the same time that I found in the language that I use. So I'm having to figure out how to have it draw how I want

from whynotwin11.

verdy-p avatar verdy-p commented on August 15, 2024

Namaszo: You're wrong, you almost can't see the icons on the left (social network links) and the right (information with the letter i encloded in a circle).

The left part should have a lighter contrasting panel to see the (black) social icons. And the right part using normal background and normal text, should have its (i) icons using the emphasis color (usually blue or green, but never black or white, at top we can see an emphasis using red: generally the emphasis color can have any hue, medium lightness, and high saturation; while te normal background and text colors have very low or very high lightness, but still avoid using excessive contrasting 0% and 100% lightness: e,g. a safe choice is almost-black#222 text on white#FFF for light theme, or almost-white#DDD on black#000 for dark theme; the contrast should be around 80% of difference for normal text with low saturation

If you have high saturation text used for emphasizing texts like active links or warnings/errors, the contrast of lightness with the background may be lower but the foreground and background should have a large enough difference of saturation, so the background should have low saturation, meaning it will be very greyish; and enough difference of lightness, so the emphasing text should be using a medium lightness and the background a very low or very high lightness, in other words the background can only be black or very dark (<20% lighness) in the dark theme, or white or very light (>80% lightness) in the light theme.

For all this, used the HSL color model rather than the RGB model, to compute a suitable accessible palette, even if finally it is converted to sRGB.

The the "high contrast" color theme, the thresholds of differences are higher than just 80%/20%, and you allow full black on full white with 100% difference. But this applies only to the normal text and normal background (that background can only be plain white or plain black).

from whynotwin11.

namazso avatar namazso commented on August 15, 2024

@verdy-p i just pointed out the improvement since the closing of the issue, i do know about the remaining problems.

from whynotwin11.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.