Best way to set text color for maximum contrast on background color?

patrickkidd

Title says it all.

I have the following ColorPicker type that is a ComoBox that paints the background with the current selected color and the hex of the color as the currentText property. By default the text color is black, which isn't visible when the selected color is dark enough.

import QtQuick 2.5
import QtQuick.Controls 2.5

ComboBox {

    property string color: currentText

    id: root
    model: util.ABLETON_COLORS
    delegate: ItemDelegate {
        rightPadding: 15
        Rectangle {
            color: modelData
            width: root.implicitWidth
            height: root.implicitHeight
        }
    }

    Rectangle {
        x: 0
        y: 0
        anchors.fill: parent
        color: root.model[currentIndex]
    }

    onColorChanged: {
        var iColor = root.model.indexOf(color)
        if(root.currentIndex !== iColor) {
            root.currentIndex = iColor;
        }
    }
}

How can I make the text visible without a stroke? Some kind of graphics filter?

Thanks!

IntruderExcluder

You can write a function that will detect if color dark or light, then change your color text to white, when color is dark enough. There are plenty examples in google how to get darkness of color.

Gojir4

@patrickkidd Hi,

Here is an example I have used in one project:

/*!
    Select a color depending on whether the background is light or dark.
    \c lightColor is the color used on a light background.
    \c darkColor is the color used on a dark background.
*/
function lightDark(background, lightColor, darkColor) {
    return isDarkColor(background) ? darkColor : lightColor
}

/*!
    Returns true if the color is dark and should have light content on top
*/
function isDarkColor(background) {
    var temp = Qt.darker(background, 1) //Force conversion to color QML type object
    var a = 1 - ( 0.299 * temp.r + 0.587 * temp.g + 0.114 * temp.b);
    return temp.a > 0 && a >= 0.3
}

patrickkidd

@gojir4 said in Best way to set text color for maximum contrast on background color?:

@patrickkidd Hi,

Here is an example I have used in one project:

/*!
    Select a color depending on whether the background is light or dark.
    \c lightColor is the color used on a light background.
    \c darkColor is the color used on a dark background.
*/
function lightDark(background, lightColor, darkColor) {
    return isDarkColor(background) ? darkColor : lightColor
}

/*!
    Returns true if the color is dark and should have light content on top
*/
function isDarkColor(background) {
    var temp = Qt.darker(background, 1) //Force conversion to color QML type object
    var a = 1 - ( 0.299 * temp.r + 0.587 * temp.g + 0.114 * temp.b);
    return temp.a > 0 && a >= 0.3
}

That's a good solution. Works well here...