High Contrast σε εφαρμογές κινητών — τι είναι, προσβασιμότητα και ρυθμίσεις αντίθεσης

Τι είναι το High Contrast στην προσβασιμότητα;

High Contrast είναι μια λειτουργία προβολής κατά την οποία το λειτουργικό σύστημα ή η εφαρμογή αυξάνει τη διαφορά μεταξύ του χρώματος προσκηνίου (κείμενο, εικονίδια) και του φόντου. Η ελάχιστη αναλογία αντίθεσης για κανονικό κείμενο σύμφωνα με το πρότυπο WCAG AA είναι 4,5:1, για μεγάλο κείμενο (από 18pt ή 14pt bold) — 3:1. Η λειτουργία High Contrast μπορεί να αυξήσει την αναλογία σε 7:1 και άνω, παρέχοντας μέγιστη διάκριση.

Σε αντίθεση με την απλή σκουρόχρωμη φόντου ή τη φωτεινότητα κειμένου, το High Contrast λειτουργεί ολοκληρωμένα: αντικαθιστά την παλέτα χρωμάτων της διεπαφής με ένα περιορισμένο σύνολο χρωμάτων υψηλής αντίθεσης, προσθέτει περιγράμματα γύρω από στοιχεία και αφαιρεί τη ημιδιαφάνεια. Η λειτουργία προορίζεται για άτομα με μειωμένη οπτική οξύτητα, φωτοφοβία και ορισμένες μορφές αχρωματοψίας.

Υπάρχουν τρεις τύποι High Contrast: συστήματος (ενεργοποιημένο στο λειτουργικό σύστημα και επηρεάζει όλες τις εφαρμογές), εφαρμογής (ενσωματωμένη λειτουργία εντός μιας μεμονωμένης εφαρμογής) και ιστού (CSS media συνάρτηση prefers-contrast). Το High Contrast συστήματος είναι το πιο ισχυρό, καθώς παρακάμπτει τα χρώματα ακόμη και σε εφαρμογές που δεν έχουν δική τους υποστήριξη προσβασιμότητας.

Ποιος χρειάζεται High Contrast

Οι κύριοι χρήστες του High Contrast — άτομα με καταρράκτη (θόλωση του φακού που μειώνει την ευαισθησία αντίθεσης), εκφύλιση ωχράς κηλίδας (απώλεια κεντρικής όρασης), γλαύκωμα και διαβητική αμφιβληστροειδοπάθεια. Επίσης, η λειτουργία είναι απαραίτητη κατά την εργασία σε έντονο ηλιακό φως — η υψηλή αντίθεση αντισταθμίζει την αντανάκλαση στην οθόνη. Σύμφωνα με το WebAIM (2025), το 86% των ιστοσελίδων έχουν κείμενο με αντίθεση κάτω από WCAG AA — το High Contrast από την πλευρά του χρήστη διορθώνει εν μέρει αυτό το ελάττωμα.

Increase Contrast στο iOS: ρυθμίσεις και τύποι αντίθεσης

Στο iOS, η λειτουργία Increase Contrast βρίσκεται στις Settings > Accessibility > Display & Text Size και περιλαμβάνει τρεις ανεξάρτητους διακόπτες: Increase Contrast (γενική αύξηση), Darken Colors (σκούρασμα φωτεινών χρωμάτων) και Reduce Transparency (μείωση διαφάνειας). Το Increase Contrast είναι ο κύριος διακόπτης που επηρεάζει το κείμενο, τα κουμπιά και τα περιγράμματα στοιχείων συστήματος.

Τεχνικά, το iOS υλοποιεί το Increase Contrast μέσω tintColor και του επιπέδου UIVisualEffectView. Κατά την ενεργοποίηση, το σύστημα αυξάνει την τιμή alpha για σκούρες αποχρώσεις και τη μειώνει για φωτεινές, ανεβάζοντας την αναλογία αντίθεσης όλων των στοιχείων UI κατά 2–3 μονάδες. Το Reduce Transparency αντικαθιστά τα ημιδιαφανή φόντα (εφέ παγωμένου γυαλιού) με αδιαφανή φόντα, βελτιώνοντας περαιτέρω την αναγνωσιμότητα κειμένου σε θολά φόντα.

Έλεγχος Increase Contrast σε εφαρμογή iOS

Ο προγραμματιστής μπορεί να ελέγξει την κατάσταση του Increase Contrast μέσω UIAccessibility και να προσαρμόσει τα χρώματα. Για παράδειγμα, εάν η αντίθεση είναι αυξημένη, μπορούν να χρησιμοποιηθούν πιο κορεσμένα χρώματα έμφασης, ενώ αν όχι — εξασφάλιση βασικής αναλογίας αντίθεσης 4,5:1 μέσω της προεπιλεγμένης παλέτας. Το UIAccessibility.isReduceTransparencyEnabled είναι επίσης χρήσιμο για απενεργοποίηση εφέ θολώματος σε ενεργή λειτουργία.

import UIKit

class ContrastManager {

    // Έλεγχος κατάστασης Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Έλεγχος Reduce Transparency
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Προσαρμογή χρώματος σε λειτουργία αντίθεσης
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Πιο κορεσμένο μπλε σε ενεργό High Contrast
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Χρώμα φόντου λαμβάνοντας υπόψη Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Αδιαφανές φόντο
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Εγγραφή σε αλλαγές
    static func observeChanges(observer: Any, selector: Selector) {
        NotificationCenter.default.addObserver(
            observer,
            selector: selector,
            name: UIAccessibility.darkerSystemColorsStatusDidChangeNotification,
            object: nil
        )
        NotificationCenter.default.addObserver(
            observer,
            selector: selector,
            name: UIAccessibility.reduceTransparencyStatusDidChangeNotification,
            object: nil
        )
    }
}

// Παράδειγμα χρήσης: UINavigationBar
func applyContrastToNavigationBar(_ navBar: UINavigationBar) {
    if ContrastManager.isIncreaseContrastEnabled {
        navBar.isTranslucent = false
        navBar.barTintColor = ContrastManager.backgroundColor()
        navBar.titleTextAttributes = [
            .foregroundColor: UIColor.label,
            .font: UIFont.boldSystemFont(ofSize: 18)
        ]
    }
}

Η κλάση ContrastManager παρέχει πρόσβαση στην κατάσταση Increase Contrast μέσω isDarkerSystemColorsEnabled, προσαρμόζει το χρώμα έμφασης σε ενεργή λειτουργία, απενεργοποιεί τη ημιδιαφάνεια του navigationBar και εγγράφεται σε ειδοποιήσεις συστήματος για αλλαγή αντίθεσης. Το UIKit σχεδιάζει αυτόματα εκ νέου τα στοιχεία κατά την αλλαγή κατάστασης UIAccessibility.

Δυναμικά χρώματα iOS (UIColor Well) και αντίθεση

Το iOS παρέχει δυναμικά χρώματα UIColor (systemBackground, label, secondaryLabel) που προσαρμόζονται αυτόματα στη λειτουργία Increase Contrast. Κατά την ενεργοποίηση του Increase Contrast, τα χρώματα συστήματος αλλάζουν τις τιμές τους: το label γίνεται πιο σκούρο (ή πιο φωτεινό σε σκούρο θέμα), το background χάνει τη ημιδιαφάνειά του. Ο προγραμματιστής συνιστάται να χρησιμοποιεί δυναμικά χρώματα για όλα τα στοιχεία UI για να αποφεύγει συγκρούσεις με την αντίθεση συστήματος.

High Contrast Text στο Android: σκούρο θέμα και αντίθεση

Στο Android, η λειτουργία High Contrast Text (Κείμενο με υψηλή αντίθεση) λειτουργεί διαφορετικά από το iOS. Αντί για σταδιακή αύξηση της αναλογίας αντίθεσης, το Android εφαρμόζει αντίστροφο χρωματικό σχήμα: σκούρο φόντο και λευκό κείμενο με αυξημένο πάχος. Η λειτουργία είναι ιδιαίτερα αποτελεσματική σε οθόνες AMOLED, όπου το μαύρο χρώμα δίνει μέγιστη αντίθεση. Η ρύθμιση βρίσκεται στις Ρυθμίσεις > Προσβασιμότητα > Βελτιώσεις ορατότητας.

Android High Contrast Text χρησιμοποιεί δύο μηχανισμούς: παράκαμψη της παλέτας χρωμάτων μέσω theme overlay και εφαρμογή ColorMatrix για αύξηση της αντίθεσης εικόνων bitmap. Το σύστημα αναλύει το τρέχον θέμα της εφαρμογής (Light/Dark) και εφαρμόζει επικάλυψη με μέγιστη αντίθεση: λευκό προσκήνιο (#FFFFFF) σε μαύρο φόντο (#000000). Τα ημιδιαφανή στοιχεία λαμβάνουν αδιαφανή υποστήριξη.

Έλεγχος High Contrast Text μέσω Android API

Για τον έλεγχο της κατάστασης του High Contrast Text στο Android, χρησιμοποιούνται τα AccessibilityManager και ContentResolver. Το API επιτρέπει τον προσδιορισμό του εάν η λειτουργία είναι ενεργή και την προσαρμογή του UI. Το Jetpack Compose υποστηρίζει προσαρμογή μέσω CompositionLocalProvider και LocalContrast.

import android.accessibilityservice.AccessibilityService
import android.content.Context
import android.provider.Settings
import android.view.accessibility.AccessibilityManager
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

class HighContrastHelper {

    // Έλεγχος μέσω AccessibilityManager
    fun isHighContrastTextEnabled(context: Context): Boolean {
        val am = context.getSystemService(
            Context.ACCESSIBILITY_SERVICE
        ) as AccessibilityManager
        return am.isEnabled && am.getEnabledAccessibilityServiceList(
            AccessibilityService.FEEDBACK_ALL_MASK
        ).any { it.resolveInfo.serviceInfo.packageName ==
            "com.android.server.accessibility" }
    }

    // Έλεγχος μέσω καθολικών ρυθμίσεων
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — χρώματα λαμβάνοντας υπόψη αντίθεση
    @Composable
    fun contrastAwareColors(): Pair<Color, Color> {
        val context = androidx.compose.ui.platform.LocalContext.current
        return if (isHighContrastTextEnabled(context)) {
            Color.White to Color.Black
        } else {
            Color.Black to Color.White
        }
    }
}

// Σύστημα View: δυναμικός επιλογέας χρώματος
class ContrastTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : AppCompatTextView(context, attrs) {

    private val helper = HighContrastHelper()

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        if (helper.isHighContrastTextEnabled(context)) {
            setTextColor(Color.WHITE)
            setBackgroundColor(Color.BLACK)
            setTypeface(getTypeface(), Typeface.BOLD)
        }
    }
}

Η κλάση HighContrastHelper ελέγχει τη δραστηριότητα High Contrast μέσω AccessibilityManager και ρυθμίσεων συστήματος, προσαρμόζει χρώματα στο Jetpack Compose και παρέχει προσαρμοσμένο ContrastTextView για το σύστημα View. Στο Android, σε αντίθεση με το iOS, δεν υπάρχει άμεση ειδοποίηση για αλλαγή High Contrast — το ContentObserver στο Settings.System είναι υποχρεωτικό για δυναμική ενημέρωση.

Material Design 3 και High Contrast

Το Material Design 3 (Material You) περιλαμβάνει ενσωματωμένη υποστήριξη για High Contrast μέσω Dynamic Color. Σε ενεργή λειτουργία συστήματος, το Material 3 επιλέγει αυτόματα τη μέγιστη τονική παλέτα: background = Neutral0, onBackground = Neutral100, primary = Primary100. Ο προγραμματιστής χρειάζεται απλώς να χρησιμοποιεί στοιχεία MD3 — το σύστημα αναλαμβάνει την προσαρμογή αντίθεσης.

WCAG contrast ratio: πρότυπα 4,5:1 και 3:1

WCAG contrast ratio — μαθηματική αναλογία φωτεινότητας μεταξύ δύο χρωμάτων που χρησιμοποιείται για την αξιολόγηση της προσβασιμότητας κειμένου. Το πρότυπο ορίζει δύο όρια: 4,5:1 για κανονικό κείμενο (επίπεδο AA) και 3:1 για μεγάλο κείμενο (από 18px/14px bold). Για το επίπεδο AAA απαιτείται 7:1 για κανονικό και 4,5:1 για μεγάλο κείμενο. Η λειτουργία High Contrast ιδανικά θα πρέπει να παρέχει 7:1 και άνω.

Ο υπολογισμός του contrast ratio γίνεται με τον τύπο: (L1 + 0,05) / (L2 + 0,05), όπου L1 — σχετική φωτεινότητα του ανοιχτότερου χρώματος, L2 — του σκουρότερου. Η σχετική φωτεινότητα υπολογίζεται από κανάλια sRGB με βάρη: 0,2126R + 0,7152G + 0,0722B. Για τον προγραμματιστή προσβασιμότητας, αρκεί η χρήση εργαλείων: WebAIM Contrast Checker, Color Contrast Analyser ή Accessibility Inspector στο Xcode.

Πίνακας ορίων αντίθεσης WCAG 2.2

Έλεγχος αντίθεσης σε κώδικα

Για αυτόματο έλεγχο του contrast ratio σε εφαρμογή ιστού, μπορεί να χρησιμοποιηθεί JavaScript. Σε ενεργή λειτουργία High Contrast, είναι επιθυμητή η επισήμανση στοιχείων που δεν πληρούν το πρότυπο AA. Παρακάτω δίνεται παράδειγμα υπολογισμού σχετικής φωτεινότητας και contrast ratio σε JavaScript.

// Υπολογισμός contrast ratio σύμφωνα με WCAG 2.2
class ContrastChecker {

    // Μετατροπή sRGB σε γραμμικό χώρο
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Σχετική φωτεινότητα (relative luminance)
    relativeLuminance(r, g, b) {
        const R = this.linearize(r)
        const G = this.linearize(g)
        const B = this.linearize(b)
        return 0.2126 * R + 0.7152 * G + 0.0722 * B
    }

    // Contrast ratio μεταξύ δύο χρωμάτων
    getContrastRatio(hex1, hex2) {
        const rgb1 = this.hexToRgb(hex1)
        const rgb2 = this.hexToRgb(hex2)
        const L1 = this.relativeLuminance(rgb1.r, rgb1.g, rgb1.b)
        const L2 = this.relativeLuminance(rgb2.r, rgb2.g, rgb2.b)
        const lighter = Math.max(L1, L2)
        const darker = Math.min(L1, L2)
        return (lighter + 0.05) / (darker + 0.05)
    }

    hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16),
        } : null
    }

    // Έλεγχος επιπέδου AA (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Έλεγχος επιπέδου AAA (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// Χρήση
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13,2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2,8:1)

Η κλάση ContrastChecker σε JavaScript υλοποιεί πλήρη υπολογισμό contrast ratio σύμφωνα με WCAG 2.2: μετατροπή sRGB σε γραμμικό χώρο, υπολογισμό σχετικής φωτεινότητας με βάρη Rec.709 και σύγκριση με όρια AA/AAA. Το εργαλείο είναι χρήσιμο για αυτόματο έλεγχο της παλέτας χρωμάτων κατά την ανάπτυξη εφαρμογών ιστού με υποστήριξη High Contrast.

Έλεγχος αντίθεσης με εργαλεία

Για τον έλεγχο του contrast ratio σε ολοκληρωμένη εφαρμογή, χρησιμοποιήστε Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) ή axe DevTools (ιστός). Αυτά τα εργαλεία βρίσκουν αυτόματα στοιχεία με αντίθεση κάτω από WCAG AA και τα επισημαίνουν. Η λειτουργία High Contrast πρέπει να είναι ενεργοποιημένη κατά τον έλεγχο — αυτό θα δείξει εάν η αύξηση αντίθεσης συστήματος είναι επαρκής για την επίτευξη 7:1.

CSS prefers-contrast: προσαρμογή ιστοσελίδων στην αντίθεση συστήματος

Η CSS media συνάρτηση prefers-contrast επιτρέπει σε ιστοσελίδες να προσαρμόζουν στυλ ανάλογα με τη ρύθμιση αντίθεσης συστήματος του χρήστη. Η συνάρτηση δέχεται τιμές: no-preference (προεπιλογή), more (ο χρήστης ενεργοποίησε το High Contrast), less (ο χρήστης προτιμά μειωμένη αντίθεση) και custom (ακριβής ρύθμιση). Υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης από το 2022.

prefers-contrast: more — σήμα για τον προγραμματιστή ιστού: αύξηση της αναλογίας αντίθεσης κειμένου, αντικατάσταση ημιδιαφανών φόντων με αδιαφανή, ενίσχυση περιγραμμάτων διαδραστικών στοιχείων και αφαίρεση εικόνων φόντου χαμηλής αντίθεσης. Το iOS Safari και το Android Chrome μεταδίδουν την τιμή more κατά την ενεργοποίηση της λειτουργίας High Contrast συστήματος (Increase Contrast / High Contrast Text).

Παράδειγμα προσαρμογής μέσω prefers-contrast

Σε prefers-contrast: more, η ιστοσελίδα θα πρέπει να ελαχιστοποιεί τον αριθμό χρωμάτων και να προτιμά ασπρόμαυρη παλέτα με χρώματα έμφασης για τονίσεις. Παρακάτω δίνεται παράδειγμα προσαρμογής CSS με αντικατάσταση χρωμάτων, απενεργοποίηση ημιδιαφάνειας και αύξηση περιγραμμάτων.

/* Βασικά στυλ (no-preference) */
.card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.button {
    background: #0066CC;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
}

/* Υψηλή αντίθεση: more */
@media (prefers-contrast: more) {
    .card {
        background: #FFFFFF;
        border: 2px solid #000000;
        color: #000000;
        box-shadow: none;
    }

    .button {
        background: #004499;
        outline: 2px solid #000000;
        outline-offset: 2px;
    }

    .muted-text {
        color: #000000; // Ήταν #666 — τώρα μαύρο
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Ήταν 0,4 — ενισχύθηκε
    }
}

/* Μειωμένη αντίθεση: less */
@media (prefers-contrast: less) {
    .card {
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }
}

Στο παράδειγμα CSS σε prefers-contrast: more, η κάρτα λαμβάνει αδιαφανές λευκό φόντο, μαύρο περίγραμμα 2px, το κείμενο γίνεται μαύρο (#000 αντί για #333), το κουμπί — σκούρο μπλε με μαύρο περίγραμμα για ορατότητα. Σε prefers-contrast: less (σπάνια περίπτωση — ο χρήστης προτιμά απαλά χρώματα), η αντίθεση μειώνεται αντίστροφα.

Συνδυασμός με prefers-color-scheme

Για πλήρη προσαρμογή προσβασιμότητας, το prefers-contrast συνδυάζεται με το prefers-color-scheme (ανοιχτό/σκούρο θέμα). Σε prefers-color-scheme: dark και prefers-contrast: more, τα χρώματα θα πρέπει να είναι λευκά σε μαύρο με φωτεινές τονίσεις. Σε ανοιχτό θέμα — μαύρα σε λευκό. Ο συνδυασμός αυτών των media συναρτήσεων δίνει 4 συνδυασμούς που πρέπει να δοκιμαστούν για πλήρη κάλυψη προσβασιμότητας.