Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request - Colorblind mode AKA Color Palette Selection for Web Monitoring Interface #657

Open
beadon opened this issue Dec 5, 2024 · 1 comment
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@beadon
Copy link
Contributor

beadon commented Dec 5, 2024

For colorblind people like me, the colors RED and GREEN are often difficult to see with certain backgrounds. The most common type of colorblindness in males is Red/Green. (reading here: https://www.allaboutvision.com/conditions/color-blindness/red-green-color-blindness/ )

Further in-depth reading for selecting colors here - since it goes beyond just the simple "don't use red and green" : https://www.tableau.com/blog/examining-data-viz-rules-dont-use-red-green-together

@dalathegreat recommended proposing alternate colors for "GOOD" (green) and "BAD" (error? , red). To get the discussion started I am recommending these 4 colors, Danger / Error, Caution, Success, Information. The Semantic color palette should be easy for everyone to interpret ( https://summit.calgary.ca/visual-identity/colour/semantic-colour-palette.html )

Details, and how to use the colors with messages --

** 1
Danger and error
Danger and error red is for destructive interactive elements, errors, and critical messages that require users' immediate attention.

Pantone: 187C
CMYK: 0, 85, 72, 35
RGB: 166, 25, 46
Hex: #a6192e
CSS: coc-danger and coc-error

Text colour: #ffffff
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)

** 2
Caution
Caution yellow lets users know there is a risk factor if they continue their action without making adjustments. Users may still be able to proceed without detrimental consequences.

Pantone: 2013C
CMYK: 0, 40, 100, 0
RGB: 255, 153, 0
Hex: #ff9900
CSS: coc-caution

Text colour: #000000
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)

** 3
Success
Success green indicates positive state and outcome. Some examples would be a severe situation is resolved, a user action is completed or data visualization that express growth.

Pantone: 7481C
CMYK: 98, 0, 56, 30
RGB: 4, 179, 79
Hex: #04b34f
CSS: coc-success

Text colour: #000000
Text contrast: Pass (AAA)
Large text contrast: Pass (AAA)

** 4
Information
Information blue highlights important messages or elements that don't require immediate user actions. Examples include a notification banner that draws attention to a relevant new message on the page, progress bar or data visualization that express neutral information.

Pantone: 2935C
CMYK: 100, 53, 0, 28
RGB: 0, 87, 184
Hex: #0057b8
CSS: coc-information

Text colour: #ffffff
Text contrast: Pass (AA)
Large text contrast: Pass (AAA)

Code Example ---

typedef enum colorPalette
{
E_COLOR_DANGER_AND_ERROR = 0xa6192e,
E_COLOR_CAUTION = 0xff9900,
E_COLOR_SUCCESS = 0x04b34f,
E_COLOR_INFORMATION = 0x0057b8
} colorPalette;

These enums can then be applied based on the type of messages displayed.

@dalathegreat dalathegreat added enhancement New feature or request good first issue Good for newcomers labels Dec 5, 2024
@beadon
Copy link
Contributor Author

beadon commented Dec 10, 2024

Additionally, there has been discussion baout the use of logging message log levels.

Borrowing from a guide online, here's a good list that we find ourselves using frequently -

TRACE
DEBUG
INFO
WARN
ERROR
FATAL

TRACE – the most fine-grained information only used in rare cases where you need the full visibility of what is happening in your application and inside the third-party libraries that you use. You can expect the TRACE logging level to be very verbose. You can use it for example to annotate each step in the algorithm or each individual query with parameters in your code.

DEBUG – less granular compared to the TRACE level, but it is more than you will need in everyday use. The DEBUG log level should be used for information that may be needed for diagnosing issues and troubleshooting or when running application in the test environment for the purpose of making sure everything is running correctly

INFO – the standard log level indicating that something happened, the application entered a certain state, etc. For example, a controller of your authorization API may include an INFO log level with information on which user requested authorization if the authorization was successful or not. The information logged using the INFO log level should be purely informative and not looking into them on a regular basis shouldn’t result in missing any important information.

WARN – the log level that indicates that something unexpected happened in the application, a problem, or a situation that might disturb one of the processes. But that doesn’t mean that the application failed. The WARN level should be used in situations that are unexpected, but the code can continue the work. For example, a parsing error occurred that resulted in a certain document not being processed.

ERROR – the log level that should be used when the application hits an issue preventing one or more functionalities from properly functioning. The ERROR log level can be used when one of the payment systems is not available, but there is still the option to check out the basket in the e-commerce application or when your social media logging option is not working for some reason.

FATAL – the log level that tells that the application encountered an event or entered a state in which one of the crucial business functionality is no longer working. A FATAL log level may be used when the application is not able to connect to a crucial data store like a database or all the payment systems are not available and users can’t checkout their baskets in your e-commerce.

To summarize what we know about each of the logging level:

*Log Level *Importance
Fatal One or more key business functionalities are not working and the whole system doesn’t fulfill the business functionalities.

Error One or more functionalities are not working, preventing some functionalities from working correctly.

Warn Unexpected behavior happened inside the application, but it is continuing its work and the key business features are operating as expected.

Info An event happened, the event is purely informative and can be ignored during normal operations.

Debug A log level used for events considered to be useful during software debugging when more granular information is needed.

Trace A log level describing events showing step by step execution of your code that can be ignored during the standard operation, but may be useful during extended debugging sessions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants