Πώς μπορείτε να αλλάξετε μέσω προγραμματισμού το χρώμα της γραμματοσειράς με βάση το φόντο; (Λειτουργία Φωτεινής/Σκοτεινής)

Εάν έχετε επισκεφθεί Martech Zone Πρόσφατα, μπορεί να έχετε παρατηρήσει ότι τώρα προσφέρουμε τη δυνατότητα προβολής του ιστότοπου είτε σε φωτεινή είτε σε σκοτεινή λειτουργία. Απλώς αναζητήστε το φεγγάρι ή ήλιος εικονίδιο δίπλα στην ημερομηνία στην επάνω αριστερή γραμμή πλοήγησης στον ιστότοπο.

Είναι ένα πολύ ωραίο χαρακτηριστικό και λειτουργεί πολύ καλά. Όταν ξεκίνησα ένα νέο εργαλείο μετατροπής σε αλλάξτε το HEX σε RGB, ήθελα να εμφανίσω πραγματικά το χρώμα που προσπαθούσε να υπολογίσει ο χρήστης. Δεν εμφανίζω μόνο το χρώμα, αλλά πρόσθεσα επίσης ένα ωραίο χαρακτηριστικό που εμφανίζει το όνομα του χρώματος. Αυτό όμως δημιούργησε ένα θέμα…

Εάν το δείγμα που εμφάνιζε το χρώμα είχε ανοιχτό φόντο, δεν θα μπορούσατε να διαβάσετε το κείμενο που δημιουργώ δυναμικά για το δείγμα. Έτσι… Έπρεπε να δημιουργήσω μια συνάρτηση που να ορίζει το χρώμα της γραμματοσειράς με βάση το χρώμα του φόντου και το αν υπήρχε αρκετή αντίθεση για να προβάλω τη γραμματοσειρά.

Λειτουργία JavaScript για φωτεινή ή σκοτεινή λειτουργία

Χρειαζόταν να δημιουργήσω μια συνάρτηση όπου θα μπορούσα να δώσω τον εξαγωνικό κώδικα για το χρώμα και μετά να επιστρέψω εάν η γραμματοσειρά θα έπρεπε να είναι λευκή ή μαύρη με βάση την αντίθεση. Αυτή η συνάρτηση Javascript έκανε το κόλπο…

function contrast(hex) {
  var threshold = 149;
  let r = 0, g = 0, b = 0;

  // 3 digits
  if (hex.length == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6 digits
  } else if (hex.length == 7) {
    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
  }
  return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}

Το όριο σε αυτή τη συνάρτηση χρησιμοποιείται για να προσδιοριστεί εάν ένα συγκεκριμένο χρώμα είναι ανοιχτό ή σκούρο. Η συνάρτηση μετατρέπει τον δεδομένο δεκαεξαδικό χρωματικό κώδικα σε κόκκινο, πράσινο και μπλε (RGB) συστατικά και στη συνέχεια χρησιμοποιεί έναν τύπο για να υπολογίσει την αντιληπτή φωτεινότητα του χρώματος. Εάν η φωτεινότητα είναι πάνω από το όριο, η συνάρτηση επιστρέφει #000000, που είναι ο εξαγωνικός κώδικας για το μαύρο. Εάν η φωτεινότητα είναι κάτω από το όριο, η συνάρτηση επιστρέφει #ffffff, που είναι ο εξαγωνικός κώδικας για το λευκό.

Ο σκοπός αυτού του ορίου είναι να διασφαλίσει ότι το χρώμα κειμένου που έχει επιλεγεί για το δεδομένο χρώμα φόντου έχει αρκετή αντίθεση ώστε να είναι ευανάγνωστο. Ένας κοινός εμπειρικός κανόνας είναι ότι το ανοιχτό κείμενο (π.χ. λευκό ή κίτρινο) πρέπει να χρησιμοποιείται σε σκούρο φόντο και το σκούρο κείμενο (π.χ. μαύρο ή μπλε) πρέπει να χρησιμοποιείται σε ανοιχτό φόντο. Χρησιμοποιώντας ένα όριο για να προσδιορίσετε εάν ένα χρώμα είναι ανοιχτό ή σκούρο, η συνάρτηση μπορεί να επιλέξει αυτόματα το κατάλληλο χρώμα κειμένου για ένα δεδομένο χρώμα φόντου.

Χρησιμοποιώντας την παραπάνω συνάρτηση, μπορώ να εφαρμόσω μέσω προγραμματισμού το χρώμα γραμματοσειράς CSS με βάση το χρώμα του φόντου. Δοκιμάστε τον μετατροπέα και θα δείτε πόσο καλά λειτουργεί!