How to choose good colors for different terminal emulators?

[asomers]

I've received a report that my TUI application is illegible on Mac OSX Terminal because the colors are all too dark. But it looks find on other terminals. Is there a good way to solve this problem? Perhaps something like a database of good palettes to use for each TERM value ?

[joshka]

It depends. If you're using the default indexed colors, run the colors example to undestand what looks good:
https://github.com/ratatui-org/ratatui/tree/main/examples#colors
The terminal will display those colors using whatever theme it wants. The one we use for all our demo images is https://github.com/mbadolato/iTerm2-Color-Schemes#aardvark-blue. There are many themes. I like this one the best as it distinctly makes it easy to see most color combinations. But you're always going to find some that don't work well.

In the next release we'll be shipping palettes from material and tailwind which you can use to easily pick colors that make sense. This will mean avoiding the user's color scheme entirely as you're sending RGB colors instead. Take a look at the main branch flex and constraints examples for some examples of this in use.

Use browser accessibility tools to work out contrast levels etc. (search for WCAG contrast checker for various tooling that will help).

[asomers]

What are "indexed colors" ? I'm using things like Color::Red and Color::Blue.

[kdheepak]

In addition to @joshka's answer, I think there's more to it when dealing with the default Mac OSX Terminal specifically. Here's a screenshot of the flex demo on Terminal vs ITerm2:

Mac OSX Terminal does not support true color:

https://github.com/termstandard/colors#not-supporting-truecolor

So you'll have to choose colors in just 256 or sometimes just stick to the default color palette, i.e. use the 16 named colors. It's quite hard (impossible?) to come up with something that works well across any color theme a user picks.

My recommendation is to provide a black and white version of your app and make sure that all text is legible there first. And make colors configurable if possible?

[kdheepak]

Most (all?) terminals support 16 colors that are named, called ANSI Colors. Here's a screenshot from the settings of the Terminal.app where you can see I've hovered over the Bright Red (9) color in the ANSI Colors section:

In Ratatui these are those 16 colors:

const NAMED_COLORS: [Color; 16] = [
    Color::Black,
    Color::Red,
    Color::Green,
    Color::Yellow,
    Color::Blue,
    Color::Magenta,
    Color::Cyan,
    Color::Gray,
    Color::DarkGray,
    Color::LightRed,
    Color::LightGreen,
    Color::LightYellow,
    Color::LightBlue,
    Color::LightMagenta,
    Color::LightCyan,
    Color::White,
];

These "named colors" correspond to the ANSI colors that a user has chosen for their terminal palette.

Additionally there are Indexed colors, which for the first 16 numbers are the same as the named colors. You access them by the number:

    for i in 0..16 {
        let color = Color::Indexed(i);
        // ...
    }

There are more colors accessible by numbers up to and including 255. Up to and including 231 are standard colors and the last 24 colors are gray scale:

    for i in 16..=231 {
        let color = Color::Indexed(i);
        // ..
    }
    for i in 232..=255 {
        let color = Color::Indexed(i);
        // ..
    }

These 240 colors (i.e. Color::Indexed(16) .. Color::Indexed(255) have customary standard colors but some terminal emulators apparently deviate on what colors they display even for those.

afaik there's no way to detect what terminal emulator you are running in on the user end, which is why making your application's colors configurable might be a good idea.

---

Here's the colors example screenshot comparing MacOSX Terminal vs ITerm2:

[joshka]

This would make a good website doc...

I regularly find myself personally reaching for https://en.wikipedia.org/wiki/ANSI_escape_code#Colors when thinking about colors at all. It has a good table of defaults for a variety of terminal emulators. Be wary if you use dark mode / dark reader - the colors won't be right.

[kdheepak]

Opened an issue: ratatui-org/ratatui-website#405

[kdheepak]

Also relevant: https://no-color.org/

I've started a related discussion here: #878

[asomers]

Thanks for the tips, guys. In the end, through trial and error I picked a new color scheme based on the 16 named colors. I'll just cross my fingers and hope that it doesn't cause problems for any other terminal. Also, I documented the NO_COLOR variable as suggested by @kdheepak . The app already worked with it, since it's implemented by crossterm.