When the user selects a very dark or very light thumbnail background color the text of the thumbnails can get unreadable

[therealmarv]

Problem

Text color of the thumbnail view changes depending on the macOS theme setting (light or dark). This will make the thumbnail texts unreadable especially in scenarios where the theme of macOS changes automatically. It can be a problem with very light and very dark thumbnail background colors.

Dark thumbnail background color, dark color theme in macOS

Dark thumbnail background color, light color theme in macOS

Possible Solution

Rather than choosing text color (black or white) in thumbnail view based on the macOS theme it should be calculated and set by Phoenix Slides itself.

I've asked ChatGPT for a solution and it came up with choosing a white or black text color based on a luminance threshold of the background color

For ensuring text readability on various background colors, a common approach is to calculate the luminance of the background color and then decide on the text color (black or white) that provides the maximum contrast. A widely used formula for calculating the luminance of a color is based on the relative luminance in the sRGB color space, which takes into account the human eye's sensitivity to different colors.

The relative luminance $((L))$ of a color is calculated using its RGB components $((R, G, B))$ as follows:

1. Convert the RGB values to the range 0–1 by dividing them by 255 (if they're in the 0–255 range).
2. For each color (R, G, B), apply the following transformation:
   • If the color's value $((C))$ is less than or equal to 0.03928, then $(C = C / 12.92)$.
   • Otherwise, $(C = ((C + 0.055) / 1.055) ^ 2.4)$.
3. Calculate the luminance $((L))$ using the formula: $[L = 0.2126 \times R' + 0.7152 \times G' + 0.0722 \times B']$

where $(R')$, $(G')$, and $(B')$ are the transformed R, G, and B values, respectively.

If the luminance is below a certain threshold (e.g., 0.5), use white text; otherwise, use black text.

Here's how you could implement this in Objective-C for a desktop Mac application:

#import <Cocoa/Cocoa.h>

@interface ColorUtility : NSObject

+ (NSColor *)textColorForBackgroundColor:(NSColor *)backgroundColor;

@end

@implementation ColorUtility

+ (NSColor *)textColorForBackgroundColor:(NSColor *)backgroundColor {
    CGFloat red, green, blue, alpha;

    // Convert the background color to the RGB color space
    NSColor *rgbColor = [backgroundColor colorUsingColorSpace:[NSColorSpace sRGBColorSpace]];
    [rgbColor getRed:&red green:&green blue:&blue alpha:&alpha];

    // Calculate the luminance of the background color
    CGFloat luminance = [self luminanceForRed:red green:green blue:blue];

    // If the luminance is greater than 0.5, black text is more readable; otherwise, use white text
    if (luminance > 0.5) {
        return [NSColor blackColor];
    } else {
        return [NSColor whiteColor];
    }
}

+ (CGFloat)luminanceForRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue {
    CGFloat components[3] = {red, green, blue};
    for (NSInteger i = 0; i < 3; i++) {
        components[i] = (components[i] <= 0.03928) ? (components[i] / 12.92) : pow((components[i] + 0.055) / 1.055, 2.4);
    }
    return components[0] * 0.2126 + components[1] * 0.7152 + components[2] * 0.0722;
}

@end

In this code, ColorUtility is a utility class with a method textColorForBackgroundColor: that calculates the appropriate text color (black or white) for a given background color. The method luminanceForRed:green:blue: computes the luminance of the color, which is then used to determine the text color that ensures good readability. This approach works well for most scenarios and adheres to accessibility standards for contrast and readability.

[gobbledegook]

Thanks for the luminance tip. Please try this patch:

~blyt.net/phxslides/phoenix-slides-156d4.dmg~

[therealmarv]

I've tested your patched version. I tried to adjust color slider of background color and playing with dark/light mode and the text was always readable!

It works perfect and fixes the issue! 🤩

[gobbledegook]

fixed in 1.5.7