How to check brightness of a background color to decide text color written on it

912

Solution 1

Brightness.estimateBrightnessForColor method e.g.
Color calculateTextColor(Color background) {
  return Brightness.estimateBrightnessForColor(background) == Brightness.light ? Colors.black : Colors.white;
}

I found that the method estimateBrightnessForColor is now part of the class ThemeData, so need to be called like this now:

ThemeData.estimateBrightnessForColor(background)

Solution 2

I can suggest 2 options:

  1. ThemeData.estimateBrightnessForColor method e.g.
Color calculateTextColor(Color background) {
  return ThemeData.estimateBrightnessForColor(background) == Brightness.light ? Colors.black : Colors.white;
}

  1. Color.computeLuminance method e.g.
Color calculateTextColor(Color background) {
  return background.computeLuminance() >= 0.5 ? Colors.black : Colors.white;
}

Keep in mind that both are computationally expensive to calculate. The former uses the latter one under the hood. The difference is in how to compute the threshold between light and dark.

Share:
912
RedyAu
Author by

RedyAu

Updated on November 23, 2022

Comments

  • RedyAu
    RedyAu over 1 year

    I have a simple question, but I wasn't able to find an answer to this. Note, that I'm almost a complete beginner.

    So I have an app (it's not mine, but I'm contributing to it), and in there is writing on a color background, which can be changed by the user. The writing should appear black if the background is bright enough but stay white if it isn't.

    The application is a school diary app for elementary and high-school students that connects to the state-wide school diary service in Hungary. Here, the best note is 5, the worst is 1. The user can set the colors of each grade in the settings. Right now, only the code for the note "4" is hard-coded to have black text (because the background is yellow by default on "4" notes), all others have white. This is what I want to automate.

    Example of white text

    Example of black text

    This is the main screen of the app for reference

    Page where user can change color for a kind of note

    Code right now:

    switch (evaluation.NumberValue) {
        case 1:
          bColor = globals.color1;
          fColor = Colors.white;
          break;
        case 2:
          bColor = globals.color2;
          fColor = Colors.white;
          break;
        case 3:
          bColor = globals.color3;
          fColor = Colors.white;
          break;
        case 4:
          bColor = globals.color4;
          fColor = Colors.black; //This should be white if color4 is dark enough. Same applies to all of them.
          break;
        case 5: //I'm looking for something like this:
          bColor = globals.color5;
          fColor = (lightLevel(globals.color5) > 50) ? Colors.black : Colors.white;
          break;
        default:
          bColor = Colors.black;
          fColor = Colors.white;
          break;
      }
    

    I'm looking for something like this:

     case 5: //I'm looking for something like this:
      bColor = globals.color5;
      fColor = (lightLevel(globals.color5) > 50) ? Colors.black : Colors.white;
      break;
    

    Thank you for any help!